JQuery阻止事件冒泡

時間 2019-11-17 標籤 jquery 阻止事件冒泡

咱們在平時的開發過程當中，確定會遇到在一個div（這個div能夠是元素）包裹一個div的狀況，可是呢，在這兩個div上都添加了事件，若是點擊裏面的div咱們但願處理這個div的事件，可是呢，咱們不但願外層的div的事件也執行，這時候咱們就要用到阻止冒泡。html

通俗點來講吧，你在家裏看電視，躲在本身的小房間，可是你不但願聲音傳到隔壁父母的耳朵裏，這時候，你可能躲在被窩裏，或者牆壁的隔音效果很好，阻隔聲音能夠理解爲阻止冒泡。jquery

阻止事件冒泡的三種手段

一、return false：能夠阻止默認事件和冒泡事件測試

二、event.stopPropagation/IE下event.cancelBubble = true;：能夠阻止冒泡事件可是容許默認事件spa

三、event.preventDefault();/IE下event.returnValue = false：能夠阻止默認事件可是容許冒泡事件code

上面的三種方法運用在不一樣的場景，能夠合理運用，下面是代碼，能夠本身作一些測試：htm

<!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">
        點我呀！！！！
    </div>
</div>

<a href="http:www.baidu.com" id="a1">百度</a>

<script src="../js/jquery/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
    $('.div1').bind('click',function(){
        alert("div1");
    });
    $('.div2').bind('click',function(){
        alert("div2");
//        return false;//也能夠經過return false 阻止冒泡
        if(window.event){//IE下阻止冒泡
            event.cancelBubble  = true;
        }else{
            event.stopPropagation();
        }
    });
    $('#a1').bind('click',function(){
        if(window.event){//IE下阻止默認事件
            event.returnValue = false;
        }else{
            event.preventDefault();
        }
        alert("我是連接");
        //return false;//若是不添加任何阻止事件，先彈框，後跳轉，咱們能夠經過return false阻止跳轉
    });

</script>
</body>
</html>