什么是事件冒泡，它是如何工作的？如何阻止事件冒泡、默認(rèn)行為?

1、什么是事件冒泡，他是如何工作的

在一個(gè)對(duì)象上觸發(fā)某類(lèi)事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒(méi)有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類(lèi)事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。

2、阻止事件冒泡的方法

（1）w3c方法是：event.stopPropagation(); 事件處理過(guò)程中，阻止冒泡事件，但不會(huì)阻止默認(rèn)行為（跳轉(zhuǎn)至超鏈接）

（2）IE則是使用event.cancelBubble = true 阻止事件冒泡

（3）return false; jq里面事件處理過(guò)程中，阻止冒泡事件，也阻止默認(rèn)行為（不跳轉(zhuǎn)超鏈接）

封裝方法：

function bubbles(e){
	var ev = e || window.event;
	if(ev && ev.stopPropagation) {
		//非IE瀏覽器
		ev.stopPropagation();
	} else {
		//IE瀏覽器(IE11以下)
		ev.cancelBubble = true;
	}
	console.log("最底層盒子被點(diǎn)擊了")
}

阻止默認(rèn)行為：

    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;
	}
}

猜你喜歡：

hidden屬性的用法

Cookie、sessionStorage、localStorage的區(qū)別

draggable屬性的用法

前端BFC是什么？

黑馬程序員HTML&JS+前端培訓(xùn)課程