停止在实时元素上传播 [英] Stop propagation on live elements

问题描述

我遇到了阻止事件传播的问题。想象一下这种情况：

I'm having an issue with stopping event propagation. Imagine this scenario:

<table id="test">
    <tbody>
        <tr>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
        </tr>
        <tr>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
            <td class="row"> </td>
        </tr>
    </tbody>
</table>​

然后此代码：

(function(){
    $('td.row').on('click', function(e){
        if (! e.isPropagationStopped())
             alert('Row clicked!');        
    });
    $('table#test').on('click', 'img.live', function(e){
        e.stopPropagation();
        alert('Image clicked!');            
    });
    $('td.row').html('<img src="http://fc03.deviantart.net/fs71/f/2011/161/f/c/nyan_cat_avatar_by_oxoxnaminemayxoxo-d3il6gm.gif" class="live">');
})();​

每当点击图像时，都会触发两个事件。我希望它只是触发 on 所点击的元素。我知道，既然它们已经存在，它们会在传播结束时被解雇，但有没有解决办法？

Whenever a image is clicked both events are fired. I want that just fires the event on the clicked element. I know that since they are live they are fired once propagation has ended but, is there any workaround?

据我调查，这两个事件实际上是相同的但 srcElement 从 HTMLTableCellElement 更改为 HTMLImageElement 。这个跨浏览器是否一致？

As far as I've investigated, both events are practically the same but srcElement changes from HTMLTableCellElement to HTMLImageElement. Is this cross-browser consistent?

我在 jsFiddle 以防你想要观看。

推荐答案

这是一个演示

问题是事件必须爬到父母那里去找到< img> 的处理程序。因此它必须通过< td> 并立即触发其处理程序，因为它不是委托处理程序。

The problem is the event has to climb to the parent to find a handler for <img>. So it has to pass through <td> and fires its handler immediately since it's not a delegated handler.

*click*   ,-----------------> (1) fire direct td handler
  img -> td -> tr -> table  
                       '----> (2) fire delegated img handler
                       X<---- (3) e.stopPropagation() //too late!

防止双重事件的一种方法是添加< td> 也是表的处理程序。然后jQuery将评估两个处理程序，从最深的事件开始，如果这些处理程序中的任何一个具有 e.stopPropagation（），则更高的事件将不会触发。

One way to prevent the double event is also add <td>'s handler to the table as well. jQuery will then evaluate the two handlers, start with the deepest event and if any of those handlers has e.stopPropagation(), events higher up will not fire.

$('table#test').on('click', 'img.live', function(e){
    e.stopPropagation();
    alert('Image clicked!');            
});

$('table#test').on('click','td.row', function(e){
     alert('Row clicked!');        
});

*click*                
  img -> td -> tr -> table
                       '----> (1) fire delegated img handler
                       X<---- (2) e.stopPropagation()
                       '----> (3) fire delegated td handler //never gets fired

这篇关于停止在实时元素上传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！