话不多说直接放源码,没错,就是网上随便一搜就出来的这个!
js代码:
function cancelBubble(e) {
var evt = e ? e : window.event;
if (evt.stopPropagation) { //W3C
evt.stopPropagation();
}else { //IE
evt.cancelBubble = true;
}
}
为什么很多人试了都说没用呢?
事实上很多同学喜欢使用这种方式绑定事件
HTML:
<div onclick="test(this)"></div>
JS:
function test(oo){
//事件处理
}
其实无论是哪种方法,传值都是很难避免的
这也就是这个方法的局限性
它在这里调用时,因为test函数已经传了值,那么我们的e就进不来
这也就造成了调用了没反应的问题
调用方法:
在绑定事件的位置,调用cancelBubble()即可,像这样:
HTML:
<div class="test" onclick="test()"></div>
JS:
function test(){
cancelBubble()
//事件处理
}
//或者这样
$(".test").click(function(){
cancelBubble()
//事件处理
})
//或者这样
$(".test")[0].addEventListener("click",function(){
cancelBubble()
//这样写似乎可以解决传值的e的问题,因为add原生方法是异步添加,可相应多个click事件
// 但是如果页面是动态添加的元素,需要重复绑定事件的问题仍然头疼
})
若需要兼容火狐,在调用该函数时,如果是在一个函数内部调用该函数,那么外部的函数不可传值进来
也就是说,尽量单独调用
emmmm最近才发现一件事情
事实上jq的on函数可以重复绑定相同事件
也就是说
$(oo).on('click',function(){
console.log(1)
})
$(oo).on('click',function(){
console.log(2)
})
在控制台打印时,会输出1和2 ,而不是只输出2