Javascript - 停止事件預設行為及事件傳遞

2014-11-16 3:54 PM

程式碼範例

// 停止事件傳遞
event.stopPropagation();

// 停止事件預設行為
event.preventDefault();

詳細解說

// Javascript
/**
 * 停止事件傳遞
 * 加入此行程式碼後事件將不會繼續傳遞至父層物件
 */
event.stopPropagation();

// 以L3點擊事件為例 
// 若HTML結構為L1 > L2 > L3的巢狀結構
// 將僅觸發L3的點擊事件
// 詳見本文下方JSFiddle範例
$("#L1").on("click", function(event){
 alert("L1");
});

$("#L2").on("click", function(event){
 alert("L2");
});

$("#L3").on("click", function(event){
 event.stopPropagation();
 alert("L3");
});

// 取消右鍵選單
// 詳見本文下方JSFiddle範例
$("#L2").on("contextmenu", function(event){
 event.stopPropagation();
 event.preventDefault();
});

各項資料連結

JSFiddle : event.stopPropagation(); 範例
JSFiddle : event.preventDefault(); 範例