javascript - 如何防止子节点上的父事件处理程序？

Question

我有一个 div，它被事件处理程序监听：

$('.thediv').click(function() {
  $(this).remove()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:500px;height:500px">
  <input type="input" style="width:100px;height:20px" />
</div>

如果单击该 div 将被删除。

但是，我想在 div 上放置一个文本输入框，如果用户单击文本输入，则不应删除 div。只有当用户点击输入框外的区域时，div 才会被移除。

我能做些什么？

标签： javascript

Answer 1

仅当事件的目标不匹配时才删除input：

$('.thediv').click(function(e) {
  if (!e.target.matches('input')) {
    $(this).remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thediv" style="width:500px;height:500px">
  other div content
  <input style="width:100px;height:20px">
</div>