JQuery6:事件冒泡

尹成發表於2018-11-14

#事件冒泡
###什麼是事件冒泡
在一個物件上觸發某類事件(比如單擊onclick事件),如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理(父級物件所有同類事件都將被啟用),或者它到達了物件層次的最頂層,即document物件(有些瀏覽器是window)。

###事件冒泡的作用
事件冒泡允許多個操作被集中處理(把事件處理器新增到一個父級元素上,避免把事件處理器新增到多個子級元素上),它還可以讓你在物件層的不同級別捕獲事件。

###阻止事件冒泡
事件冒泡機制有時候是不需要的,需要阻止掉,通過 event.stopPropagation() 來阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

###阻止預設行為
阻止右鍵選單

$(document).contextmenu(function(event) {
    event.preventDefault();
});

###合併阻止操作
實際開發中,一般把阻止冒泡和阻止預設行為合併起來寫,合併寫法可以用

// event.stopPropagation();
// event.preventDefault();

// 合併寫法:
return false;

學院Go語言視訊主頁
https://edu.csdn.net/lecturer/1928

清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群:721929980
在這裡插入圖片描述

相關文章