gpt4 book ai didi

javascript - 从绑定(bind)到主体的选择器中删除某些元素

转载 作者:行者123 更新时间:2023-12-03 05:56:12 27 4
gpt4 key购买 nike

我有一个绑定(bind)到 body 元素的 click 事件,但我不希望它在用户单击某些元素时触发,即当该元素具有 属性时data-dropdown-target,但是我尝试过的方法不起作用,它总是会触发。

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

HTML:

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

CSS:

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

.foo {
background-color: gray;
}

.bar {
background-color: teal;
}

.moo {
background-color: green;
}

JS:

$('body').not('[data-dropdown-target]').on('click', function(e) {

console.log('Hi!');

});

我认为这是因为它试图删除具有此属性的body元素,而不是它的子元素 - 正确吗?

我该如何阻止它在具有此属性的子元素上触发 - 我是否必须循环遍历所有内容,因为出于性能原因我想避免这种情况,尤其是因为它位于主体上。

最佳答案

实际上你的代码尝试绑定(bind)事件点击每个 <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>

关于javascript - 从绑定(bind)到主体的选择器中删除某些元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39919467/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com