gpt4 book ai didi

javascript - 单击主体而不是两个 div

转载 作者:行者123 更新时间:2023-11-30 20:23:46 24 4
gpt4 key购买 nike

这是我的功能:

document.querySelector('body').addEventListener('click',e=>{getRandomImagePair()});

当我点击 body 的任何地方时,会发生一些事情。我有两个 div .more.wd,如果我点击它们,函数 getRandomImagePair() 就会执行.我怎样才能在单击链接时不触发该功能?

我在下面尝试了这个,它可以工作,但是 .more div 不会触发另一个需要的不同功能。

$('.more, .wd').on('click', function(event) {
event.stopPropagation();
});

最佳答案

使用 event delegation ,只需检查 event.target 元素的 className。在事件处理程序回调中使用 if 语句来防止调用 getRandomImagePair 链接被单击:

function getRandomImagePair() {
console.log('getRandomImagePair called');
}

//using event delegation
document.querySelector('body').addEventListener('click', e => {
if (e.target.className !== 'wd' && e.target.className !== 'more') {
getRandomImagePair();
}
});
.wd,
.more {
color: blue;
text-decoration: underline;
}
<body>
<div class="more">.more</div>
<div class="wd">.wd</div>

<p>Here is some other stuff</p>
<p>that when clicked on should still fire event handler</p>
</body>

关于javascript - 单击主体而不是两个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51155129/

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