停止传播不起作用

Question

我试图阻止内部复选框的事件冒泡到tr元素的单击事件。

我有以下标记：

<table border="1"> 
    <tr class="row"> 
    <td> 
     Item 1 
    </td> 
    <td> 
     <input type="checkbox" class="cb"> 
    </td> 
    </tr> 
    <tr class="row"> 
    <td> 
     Item 2 
    </td> 
    <td> 
     <input type="checkbox" class="cb"> 
    </td> 
    </tr> 
</table> 

行被动态地添加，所以要加听众自动动态添加元素中，我使用以下代码：

$(document).ready(function() { 
    $('body').off('click.row').on('click.row', '.row', function() { 
    alert(1); 
    }); 
    $('body').off('change.cb').on('change.cb', '.cb', function(e) { 
    e.stopPropagation(); 
    alert(2); 
    }); 
}); 

然而事件仍然冒泡到tr元素。我也尝试以下内容：

e.stopImmediatePropagation(); 
window.event.cancelBubbles = true; 
e.bubbles = false; 

没有任何工作。

我转载这一问题的jsfiddle：

JSFiddle

Answer 1

在这种情况下，没有事件冒泡发生的历史，因为你已经在不同的元素定义不同的事件，仅仅如此碰巧既防火，当鼠标点击在复选框上（因为您也点击了一行）。

您应该根本不添加行单击事件侦听器，或者将stopPropagation移动到另一个处理器以阻止它发射。

$(document).ready(function() { 
    $('body').off('click.row').on('click.row', '.row', function() { 
    e.stopPropagation(); 
    alert(1); 
    }); 
    $('body').off('change.cb').on('change.cb', '.cb', function(e) {  
    alert(2); 
    }); 
});