JS 阻止事件冒泡

冒泡事件就是：你给父元素绑定了一个事件，你点击子元素也会触发这个事件，因为事件是向上冒泡的，阻止冒泡的方法最常见的方法有两种：

1.if(event.target == this)

使用这个判断就可以确定你点击的元素是否是事件触发的来源，这样就会阻止冒泡事件。

$('#container button').click(function(event){
    if(event.target==this){
      ......
    }
  })
　　

　　

2.event.stopPropagation()

使用这个方法的作用是阻止事件冒泡，阻止你对长辈元素的影响，但不能阻止后代元素对你的影响。

$('#container button').click(function(event){
    ......
    event.stopPropagation();
})

 

 

理解了这个就很容易解决我今天碰到的问题了

一个表格第一列是checkbox，写了了个JS使得点击表格每一行都会选中该checkbox

                $("#container tbody>tr").click(function () {
                    var cb = $(this).find("td:eq(0)>input:checkbox")[0];
                    if (!cb.checked) {
                        cb.checked = true;
                    } else {
                        cb.checked = false;
                    }
                });

结果才发现不管怎么点击checkbox，就是选不中，原因就是你点击checkbox,已经给你选中了，但事件冒泡到tr触发了tr的click事件，又给你取消选中了。

解决办法就是组织checkbox的事件冒泡：

                $("#container tbody input:checkbox").click(function (event) {
                    event.stopPropagation();
                });

　当然也可以用第一种方法，event.target == this,但我这里情况特殊，不适用，因为你点击表格时，他会tr td傻傻分不清楚的。