Question

我有3个元素。每个元素中都有一个元素，当点击它时找到它们的父元素并将其发送出去进行处理。问题是点击事件似乎是堆叠的。例如，如果我点击元素＃1，它会发送元素＃1进行处理。然后，如果我单击元素＃3，它会发送元素＃1和元素＃3。然后，如果我单击元素＃2，它将发送元素＃1，元素＃3和元素＃2。如何让它只发送click事件的直接父级。

相关代码：

    $('.tiles ').on('click', '.fa-pencil', function(e){
        e.stopPropagation();

        var tile = $(this).closest(".live-tile");
        showEditDialog(tile);

    });

.tiles是所有父母共享的包装类，.live-tile是被送走的个人父母，.fa-pencil是被点击的孩子，而showEditDialog是被送走的。

EDIT ----

<div class="tiles">
    <!-- <div class="live-tile" >
         <span id = "bar" class = "tile-title optionsBar"><i class="fa fa-2x fa-pencil"></i><i  class="fa fa-2x fa-times-circle"></i></span>
         <div class ="mainDiv"></div>
        <span class = "tile-title imageBar"><img class = "image" src = "http://9gag.com/favicon.ico"></img></span>
        </div>-->
</div>

评论中的内容（除了.tiles之外的所有内容）都是动态添加的，但这就是它的样子。

Answer 1

而不是stopPropagation。尝试使用stopImmediatePropagation()

将其切换出来

来自http://devdocs.io/jquery/event.stoppropagation

阻止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

来自http://devdocs.io/jquery/event.stopimmediatepropagation

除了在元素上保留任何其他处理程序之外执行时，此方法也会隐式停止冒泡调用event.stopPropagation（）。简单地阻止事件发生冒泡到祖先元素但允许其他事件处理程序在同一个元素上执行，我们可以使用event.stopPropagation（）代替。

我相信因为正在执行其他处理程序而导致您的问题。通过改变它将阻止执行和冒泡。

Answer 2

没关系我发现代码中没有特别的问题可以解决这个问题。 showEditDialog（）函数调用自身两次，并且出于某种原因冒泡到第二个父级tile。我只是删除了对它自己的调用，它只调用了正确的调用。

Answer 3

因为您要识别带有.tile类的所有按钮，所以每次都必须将一个UNIQUE子选择器解析为函数。

Jquery点击事件堆叠

3 个答案: