這篇文章主要講解js中阻止事件冒泡，阻止默認(rèn)事件的方法，理解stopPropagation()，preventDefault()，return false的區(qū)別。

1、event.stopPropagation()方法

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件處理程序被執(zhí)行。不讓事件向documen上蔓延，但是默認(rèn)事件任然會(huì)執(zhí)行，當(dāng)你掉用這個(gè)方法的時(shí)候，如果點(diǎn)擊一個(gè)連接，這個(gè)連接仍然會(huì)被打開。

提示：請(qǐng)使用 event.isPropagationStopped() 方法來檢查指定的事件上是否調(diào)用了該方法。

2、event.preventDefault()方法

取消事件的默認(rèn)動(dòng)作。該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作（如果存在這樣的動(dòng)作）。例如：

form表單如果 type 屬性是 "submit"，在事件傳播的任意階段可以調(diào)用任意的事件句柄，通過調(diào)用該方法，可以阻止提交表單。
a元素中href連接，如果調(diào)用此方法是，連接不會(huì)被打開。

注意

1）、如果 Event 對(duì)象的 cancelable 屬性是 fasle，那么就沒有默認(rèn)動(dòng)作，或者不能阻止默認(rèn)動(dòng)作。無論哪種情況，調(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，頁面跳轉(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)簽頁面不會(huì)跳轉(zhuǎn)，但是會(huì)打印出1。說明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)簽，頁面會(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;}

頁面不會(huì)跳轉(zhuǎn)，也不會(huì)打印出1。這里return false;等于同時(shí)調(diào)用了event.stopPropagation()和event.preventDefault()。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)