Question

当我的叠加层出现时，一切正常，但我添加了一些代码来关闭叠加层，但即使我只是点击我的箭头，此代码也会被触发。以下是被触发的代码，当我没有点击箭头来更改图像时这很好。但是当我点击箭头时，作为叠加层的背景也是触发器，因此图像正在改变，但叠加层也在隐藏。

$('#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

Answer 1

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

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

Answer 2

你的大部分元素是#overlay。这意味着无论您在哪里点击，您都会点击#overlay元素。这就是你的回调总是被触发并关闭你的形象。

要修复问题并仅在点击图片时关闭图片，您可以使用：

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

Answer 3

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

<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＃overlay`，它位于事件链的最顶层。

为防止事件冒泡（btw冒泡是默认行为，但在诸如你不喜欢的情况下。）尝试在事件处理程序结束后或内部放置stopPropagation()。

我希望我可以更具体地说明在哪里以及如何应用此代码，因为它与您的来源有关，但您没有提供与您的eventListeners，eventHandlers等有关的特定区域......

此示例中使用了#overlay，但我建议您改用event.target父级。此代码的目的是通过它们相互共享的父接受一个元素（即按钮）或多个元素（即按钮）之类的事件。这是一个点击潜在的几个不同按钮的地方。起初你认为这是无意义的，你会说，“确保单击该按钮是因为单击了父级，但现在父级链接到的所有内容都将触发其他所有内容。”

除非我们在eventHandler的最后有stopPropagation();，否则这是正确的。这将阻止事件传播回到事件链中，因此没有更多的流氓触发器在任何地方点亮。 RogueTriggers®听起来像一个伟大的乐队名称。：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();
}

jQuery Click事件触发多个元素（我只想要1）

3 个答案: