Question

我有一个绑定到body元素的click事件，但是当用户点击某些元素时，我不希望它被触发，即当元素的属性为{{1}时

。然而，我所尝试的并不是在工作，它总会被激发。

CodePen： http://codepen.io/anon/pen/ORQkrb

HTML：

data-dropdown-target

CSS：

<body>
  <div class="foo">foo</div>
  <div class="bar" data-dropdown-target="something">bar</div>
  <div class="moo">moo</div>
</body>

JS：

.foo, .bar, .moo {
  padding: 10px;
  margin: 5px;
}

.foo {
  background-color: gray;
}

.bar {
  background-color: teal;
}

.moo {
  background-color: green;
}

我认为这是因为尝试删除具有此属性的$('body').not('[data-dropdown-target]').on('click', function(e) { console.log('Hi!'); });元素，而不是它的孩子 - 是否正确？

如何阻止它对具有此属性的子元素进行触发 - 我是否必须遍历所有内容，因为出于性能原因，我希望避免这种情况，特别是因为它在身体上

Answer 1

实际上，您的代码会尝试在没有<body>属性的每个data-dropdown-target上绑定事件点击。

这可以解决您的问题：

$('body').on('click', function(e) {
    if($(e.target).data('dropdown-target') || $(e.target).parents('[data-dropdown-target]').length !== 0) return false;
    console.log('Hi!');

});

.foo, .bar, .moo {
  padding: 10px;
  margin: 5px;
}

.foo {
  background-color: gray;
}

.bar {
  background-color: teal;
}

.moo {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  
  <div class="foo">foo</div>
  <div class="bar" data-dropdown-target="something">bar</div>
  <div data-dropdown-target="something">
    <div class="moo">moo</div>
  </div>
</body>

Answer 2

如果not选择器具有[data-dropdown-target]属性，则只删除它。

从匹配元素集中删除元素。

$('body').on('click', function(e) {

    console.log('Hi!');

});

$('[data-dropdown-target]').on('click',function(e){
 return false;
});

从绑定到主体的选择器中删除某些元素

2 个答案: