jQuery单击多个元素上的事件触发(我只想要1）

jQuery Click Event Triggering On Multiple Elements (I only want 1)

本文关键字：只想 事件 单击 元素 jQuery      更新时间：2023-09-26

当我的覆盖出现时，一切都很好，但我添加了一些代码来关闭覆盖，但即使我只是点击箭头，这个代码也会被触发。以下是被触发的代码，当我没有单击箭头来更改图像时，这很好。但当我点击箭头时，作为覆盖的背景也被触发，所以图像在变化，但覆盖也在隐藏。

$('#overlay').click(function() {
    $(this).fadeOut('slow');
});

我如何才能在不点击背景覆盖的情况下使用箭头？如果你打开这个项目，你就会明白我在说什么。

打开项目：https://htmlpreview.github.io/?https://github.com/rodriguesandrewb/photo_gallery_v1/blob/master/index.html

要打开存储库：https://github.com/rodriguesandrewb/photo_gallery_v1

您想要使用event.stopPropagation()：https://api.jquery.com/event.stoppropagation/

这可以防止事件冒泡（由其他元素触发）

您最喜欢的元素是#overlay。这意味着，无论您在哪里单击，都将始终单击#overlay元素。这就是您的回调总是被触发并关闭图像的方式。

要解决您的问题并使您的图像只在点击时关闭，您可以使用：

$('#changeImage').click(function() {
  $(this).closest('#overlay').fadeOut('slow');
});

好的，有很多代码需要整理，所以我猜你的覆盖层是

<div id="overlay" style="display: block;"></div>

而你的event.target就在这个里面：

<div class="mainCenter">
    <div class="container">
        <div id="topFixed">
            <input type="text" id="search" placeholder="Search">
        </div>
        <ul id="gallery">
            .......

我不能100%确定你的event.target在哪里（你想点击的元素，而不是其他元素）。但可以肯定的是，在你点击你想要的按钮后，事件会继续在事件链上冒泡。事件链基本上是位于事件链最顶端的event.target's ancestors which includes#覆盖层。

为了防止事件冒泡（btw冒泡是默认行为，但在像您这样的情况下，这是不需要的。）请尝试将stopPropagation()放在事件处理程序的末尾或里面。

我希望我能更具体地说明在哪里以及如何应用此代码，因为它与您的源代码有关，但您没有提供与您的事件监听器、事件处理程序等相关的特定领域。

本例中使用了#overlay，但我建议您改用event.target父级。此代码的目的是通过相互共享的父元素接受诸如"点击"一个元素（即按钮）或多个元素（如按钮）之类的事件。这是一个可以点击几个不同按钮的地方。一开始你会认为这是没有意义的，你会说，"当然，这个按钮是因为点击了父项，但现在父项链接到的所有内容都会触发其他所有内容。"

这是正确的，除非我们在事件处理程序的最后有stopPropagation();。这将阻止事件在事件链上的传播，这样就不会再有到处都是流氓触发器了。Rogue Triggers®听起来是一个很棒的乐队名称P

有关详细信息和更好的解释：http://www.kirupa.com/html5/handling_events_for_many_elements.htm

var overlay = document.querySelector("#overlay");
theParent.addEventListener("click", doSomething, false);
function doSomething(e) {
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        alert("Hello " + clickedItem);
    }
    e.stopPropagation();
}
相关文章：