js中阻止冒泡事件

转载:http://www.myjscode.com/page/article16.html

在一个容器内部，某个元素通过on绑定事件，e.stopPropagation()不生效的问题
首先需要了解的是on绑定事件的原理，on事件可以给未出现的dom添加事件，为什么？因为我们是在元素的父元素添加的事件，通过e.target来定位当前点击的是哪个元素。换句话说，on绑定的事件其实是绑定在父元素上面的。所以在子元素中阻止冒泡是没有作用的，还是会触发父元素上面的事件。
解决方法：如果父元素绑定了click，子元素也绑定的click，不希望点击子元素出发父元素的click。那么在父元素的click响应函数中，判断$(e.target).closeset(”)选中子元素，如果成立，return掉就可以

如:

<div>
    <tr>
        <td></td>
    </tr>
</div>

要给tr和td分别绑定一个点击事件.

//用on()给tr绑定点击事件
$("div").on("click","tr",function(){
    alert("tr);
})
//用on()给td绑定点击事件
$("div").on("click","td",function(){
    alert("tr);
})

其实这里的事件都是绑定在div上面的.想避免点击td触发tr的点击事件,就可以用上面说到的方法来避免冒泡.

如果div外面还有冒泡事件..这时可以直接用

    var e = window.event || event;
    if(e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }

来阻止冒泡.

其实就是,当on()是用同一个父类来进行动态绑定时,就只能用第一种方法,来判断元素进行阻止冒泡.
on()不是使用同一父类进行绑定的就可以使用第二种方法进行冒泡阻止.