使用jquery on事件委托给了祖先元素，怎么阻止子元素的事件影响父元素的事件

Question

我现在有两个点击事件html格式如下

<table>
  <tr>
    <td></td>
    <td class='edit'></td>
  </tr>
</table>

里面的tr和td都是动态创建的，事件委托代码如下

table.on('click','tr',function(){
alert("我点击了一行")
})
table.on('click','.edit',function(){
alert('我点击了单元格')
})

怎么样才能让我点击class为edit单元格的时候不会触发整行的click事件

Answer 1

给一个思路你。 在父级事件屏蔽掉

<script>
    $('table').on('click','tr',function(e){

        // 如果你点击的是 .edit 的会返回 edit，否则返回 undefined
        $(e.target).attr('class');
    })
    
</script>

Answer 2

阻止冒泡，，，，

Answer 3

table.on('click','tr',function(){
alert("我点击了一行")
})
table.on('click','.edit',function(e){
    e.preventDefault() || e.cancelBubble()
alert('我点击了单元格')
})

Answer 4

阻止冒泡，并在父级组件上检测该次事件是否被调用过了：

table
.on('click','tr',function(e){
    var bubble = e.isPropagationStopped();
    if (!bubble) {
        alert("我点击了一行");
    }
})
.on('click','.edit',function(e){
    e.stopPropagation();
    alert('我点击了单元格');
});

Answer 5

table.on('click','.edit',function(){
  alert('我点击了单元格')
  return false
})