1、什么是事件冒泡,他是如何工作的
在一个对象上触发某类事件(比如单击 onclick 事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的 最顶层,即 document 对象(有些浏览器是 window)
2、阻止事件冒泡的方法
w3c 方法是:event.stopPropagation(); 事件处理过程中,阻止冒泡事件,但不会阻止默认行为 (跳转至超链接)
IE 则是使用 event.cancelBubble = true 阻止事件冒泡
return false; jq 里面事件处理过程中,阻止冒泡事件,也阻止默认行为(不跳转超链接) 封装方法:
function bubbles(e) {
var ev = e || window.event;
if (ev && ev.stopPropagation) {
//非 IE 浏览器
ev.stopPropagation();
} else {
//IE 浏览器(IE11 以下)
ev.cancelBubble = true;
}
console.log("最底层盒子被点击了");
}
阻止默认行为:
w3c 的方法是 e.preventDefault(),IE 则是使用 e.returnValue = false
封装:
//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick = function (e) {
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue == false;
}
};