Question

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

<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 所点击的元素。我知道，既然它们已经存在，它们会在传播结束后被解雇但是，有没有解决办法？

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

我已经在jsFiddle中放了一个演示，以防您想要观看。

Answer 1

Here's a demo

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

*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()，则更高的事件将不会触发。

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

Answer 2

也许我错了，但你不能在这里使用event delegation吗？

(function(){
    $('#test').on('click', function(e){
        if ( !/img$/i.test((e.target || e.eventSrc).nodeName)){
          alert('row clicked');
        } else {
          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">');
})();

它可以帮助您节省传播的麻烦。这是一个jsfiddle

停止在实时元素上传播

2 个答案: