Js阻止事件冒泡與阻止默認(rèn)事件
1、event.stopPropagation()方法
2、event.preventDefault()方法
form表單如果 type 屬性是 "submit"，在事件傳播的任意階段可以調(diào)用任意的事件句柄，通過(guò)調(diào)用該方法，可以阻止提交表單。
a元素中href連接，如果調(diào)用此方法是，連接不會(huì)被打開。
注意
1）、如果 Event 對(duì)象的 cancelable 屬性是 fasle，那么就沒有默認(rèn)動(dòng)作，或者不能阻止默認(rèn)動(dòng)作。無(wú)論哪種情況，調(diào)用該方法都沒有作用。
2）、該方法會(huì)發(fā)生冒泡，冒泡會(huì)傳遞到上一層的父元素。
3、return false；
這個(gè)方法比較暴力，他會(huì)同事阻止事件冒泡也會(huì)阻止默認(rèn)事件；寫上此代碼，連接不會(huì)被打開，事件也不會(huì)傳遞到上一層的父元素；
可以理解為return false就等于同時(shí)調(diào)用了event.stopPropagation()和event.preventDefault()
4、實(shí)例講解
這是html代碼，在div里面套了一個(gè)a標(biāo)簽，連接到fly63前端網(wǎng)。
<div id="box"><a id="box_1" href="http://www.webqdkf.com">有課前端網(wǎng)</a></div>
第一種：不阻止事件冒泡和默認(rèn)事件
document.getElementById('box').onclick=function(e){console.log("1");//不阻止事件冒泡會(huì)打印1，頁(yè)面跳轉(zhuǎn);}
第二種：阻止默認(rèn)事件
document.getElementById('box').onclick=function(e){console.log("1");}document.getElementById('box_1').onclick=function(e){e.preventDefault();//阻止默認(rèn)事件}
我們會(huì)發(fā)現(xiàn)阻止了默認(rèn)事件，點(diǎn)擊a標(biāo)簽頁(yè)面不會(huì)跳轉(zhuǎn)，但是會(huì)打印出1。說(shuō)明e.preventDefault()只能阻止默認(rèn)動(dòng)作，但是冒泡仍然會(huì)發(fā)生。
第三種：阻止事件冒泡
document.getElementById('box').onclick=function(e){console.log("1");}document.getElementById('box_1').onclick=function(e){e.stopPropagation();//阻止事件冒泡}
點(diǎn)擊a標(biāo)簽，頁(yè)面會(huì)跳轉(zhuǎn)到fly63前端網(wǎng)，但是在控制臺(tái)中是沒有打印“1”的。
第四種：阻止事件冒泡和默認(rèn)事件
document.getElementById('box').onclick=function(e){console.log("1");}document.getElementById('box_1').onclick=function(e){e.stopPropagation();e.preventDefault();//阻止默認(rèn)事件}
等同于
document.getElementById('box_1').onclick=function(e){return false;}
頁(yè)面不會(huì)跳轉(zhuǎn)，也不會(huì)打印出1。這里return false;等于同時(shí)調(diào)用了event.stopPropagation()和event.preventDefault()。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
