Question

我正在尝试排除<div>代码上的点击事件：

这是我的HTML：

<div class="event" style="height:150px;width:150px;border:1px solid #dddddd;padding:10px">
  <div class="number">10</div>
  <div class="wrap"><a style="display:block;color:#FF0000">Event Name</a></div>
</div>

这里是javascript：

  $(document).on('click', '.event', function(e) {
      if($(e.target).not('.wrap')){
          console.log('Hello');
      }
  });

但由于某种原因，它对我不起作用。点击.wrap或<a>元素时，我不希望点击事件。

这里也是jsbin：https://jsbin.com/ziyukuyefo/edit?html,js,output

Answer 1

您的代码中有2个问题 - not()返回一个jQuery对象，因此你的条件总是真实的 - 由于wrap e.target中有一个锚元素，可能不是指wrap元素本身

您可以使用nearest（）检查是否有与祖先树中的选择器匹配的元素

$(document).on('click', '.event', function(e) {
  if (!$(e.target).closest('.wrap').length) {
    snippet.log('clicked');
  }
});

.wrap {
  background-color: lightgrey;
}
.wrap a {
  border: 1px solid red;
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event" style="height:150px;width:150px;border:1px solid #dddddd;padding:10px">
  <div class="number">10</div>
  <div class="wrap"><a style="display:block;color:#FF0000">Event Name</a>
  </div>
</div>

另一个选择是停止事件传播，这可能不适合所有场景

jQuery从click事件中排除子元素

1 个答案: