Javascript 停止活动元素上的传播

我在停止事件传播方面遇到问题。想象一下这个场景：

<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">');
})();​

（函数（）{
$（'td.row'）。在（'click'，函数（e）上{
如果（！e.isPropagationStopped（））
警报（'单击行！'）；
});
$（'table#test'）。关于（'click'，'img.live'，函数（e）{
e、 停止传播（）；
警报（'单击图像！'）；
});
$（'td.row'）.html（“”）；
})();​

每当单击图像时，都会触发两个事件。我希望它只是在单击的元素上触发事件。我知道，由于它们是活动的，一旦传播结束，它们就会被解雇，但是，有什么解决办法吗

据我调查，这两个事件实际上是相同的，但是

srcelment

从

HTMLTableCellElement

更改为

HTMLImageElement

。这个跨浏览器一致吗

我已经放了一个演示，以防你想观看比赛。

问题是事件必须爬升到父级才能找到

的处理程序。因此，它必须通过

并立即启动其处理程序，因为它不是委托处理程序

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

问题是事件必须爬升到父级才能找到

的处理程序。因此，它必须通过

并立即启动其处理程序，因为它不是委托处理程序

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

---

也许我错了，但你不能用这里吗

（函数（）{
$（'#test'）。在（'click'，函数（e）上{
if（！/img$/i.test（（e.target | | e.eventSrc.nodeName））{
警报（“单击行”）；
}否则{
警报（“单击图像”）；
}           
});
$（'td.row'）.html（“”）；
})();​

---

它为您节省了传播的麻烦。这里有一个

也许我错了，但是你不能用这里吗

（函数（）{
$（'#test'）。在（'click'，函数（e）上{
if（！/img$/i.test（（e.target | | e.eventSrc.nodeName））{
警报（“单击行”）；
}否则{
警报（“单击图像”）；
}           
});
$（'td.row'）.html（“”）；
})();​

---

它为您节省了传播的麻烦。这里有一个

我相信jQuery委托系统的机制是，函数绑定到

#test

，单击时，jQuery检查目标元素是否为

img.live

。因此，

stopPropagation

总是在

isPropagationStopped

之后调用。（尽管我可能错了）我也是这么想的。没有解决方法？我相信jQuery委托系统的机制是，该函数绑定到

#test

，单击时，jQuery检查目标元素是否为

img.live

。因此，

stopPropagation

总是在

isPropagationStopped

之后调用。（尽管我可能错了）我也是这么想的。没有解决办法？

(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">');
})();​