Stoppropagation on div within table不起作用

Question

当一个div内的表被点击stoppropagation不触发，直到点击气泡tr。我如何停止冒泡出的div?

http://jsfiddle.net/tcbnW/指示我的问题

div点击!→点击按钮!→STOP触发

我需要

div点击!→STOP触发

html代码

<table>
    <tr onclick="$('#INFO').append('tr clicked!<BR>');">
        <td>
            <div onclick="$('#INFO').append('div clicked!<BR>');" style="font-weight:bold;" class="STOP">test div</div>
        </td>
    </tr>
</table>
<div id="INFO" style="border:1px solid #F00;"></div>

脚本

$(document).on('click','.STOP',function(event){
       $('#INFO').append('STOP triggered<BR>');
       event.stopPropagation();
       });

Answer 1

你不应该像jQuery那样把"传统"事件处理(onfoo HTML属性)和"现代"事件处理(使用addEventListener等)混在一起——意外的结果必然会发生。

Answer 2

尝试从div中删除onclick事件。基本上你有2个监听器为同一事件一个是嵌入在onclick和第二个是$(document).on

看看这个:[a link] http://jsfiddle.net/tcbnW/1/。这是一个附加

event.stopImmediatePropagation();

我认为这应该可行。