jQuery阻止事件冒泡實(shí)例分析

2019-11-19 13:34:15

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了jQuery阻止事件冒泡。分享給大家供大家參考，具體如下：

我們?cè)谄綍r(shí)的開(kāi)發(fā)過(guò)程中，肯定會(huì)遇到在一個(gè)div（這個(gè)div可以是元素）包裹一個(gè)div的情況，但是呢，在這兩個(gè)div上都添加了事件，如果點(diǎn)擊里面的div我們希望處理這個(gè)div的事件，但是呢，我們不希望外層的div的事件也執(zhí)行，這時(shí)候我們就要用到阻止冒泡。

通俗點(diǎn)來(lái)說(shuō)吧，你在家里看電視，躲在自己的小房間，但是你不希望聲音傳到隔壁父母的耳朵里，這時(shí)候，你可能躲在被窩里，或者墻壁的隔音效果很好，阻隔聲音可以理解為阻止冒泡。

阻止事件冒泡的三種手段

1、return false：可以阻止默認(rèn)事件和冒泡事件

2、event.stopPropagation/IE下event.cancelBubble = true;：可以阻止冒泡事件但是允許默認(rèn)事件

3、event.preventDefault();/IE下event.returnValue = false：可以阻止默認(rèn)事件但是允許冒泡事件

上面的三種方法運(yùn)用在不同的場(chǎng)景，可以合理運(yùn)用，下面是代碼，可以自己做一些測(cè)試：

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>jQuery阻止冒泡</title>  <style>    .div1{      width: 140px;      border: 1px solid blue;    }    .div2{      width: 100px;      height: 100px;      margin: 20px;      border: 1px solid red;    }  </style></head><body><div class="div1">  <div class="div2">    點(diǎn)我呀！！！！  </div></div><a href="http:www.baidu.com" rel="external nofollow" id="a1">百度</a><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>  $('.div1').bind('click',function(){    alert("div1");  });  $('.div2').bind('click',function(){    alert("div2");//    return false;//也可以通過(guò)return false 阻止冒泡    if(window.event){//IE下阻止冒泡      event.cancelBubble = true;    }else{      event.stopPropagation();    }  });  $('#a1').bind('click',function(){    if(window.event){//IE下阻止默認(rèn)事件      event.returnValue = false;    }else{      event.preventDefault();    }    alert("我是鏈接");    //return false;//如果不添加任何阻止事件，先彈框，后跳轉(zhuǎn)，我們可以通過(guò)return false阻止跳轉(zhuǎn)  });</script></body></html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.VeVB.COm/code/HtmlJsRun測(cè)試運(yùn)行效果如下：