tr td同時添加點擊事件

 

1.情景展示

　　tr td同時添加點擊事件，互不影響，如何實現？

　　如上圖所示，tr、td、input標簽都添加了點擊事件，在input框進行點擊時，分別執行的是：input，td，tr三級標簽的點擊事件，這絕對不是我們想要的效果，我們只想執行input的點擊事件，如何實現？

2.原因分析

　　這個流程圖能夠很好的解釋，為什么執行了3次點擊事件。

　　同一事件的執行順序

　　DOM方法 addEventListener() 和 removeEventListener()是用來分配和刪除事件的函數。 

　　這兩個方法都需要三個參數，分別為：事件名稱（String）、要觸發的事件處理函數(Function)、指定事件處理函數的時期或階段(boolean)。　　

　　由上圖可知捕獲過程要先於冒泡過程

　　當第三個參數設置為true就在捕獲過程中（由里向外）執行，反之就在冒泡過程（由外向里）中執行處理函數。 

3.解決方案

　　如上圖所示，想要阻止點擊事件想上執行，就要阻止向上冒泡。

　　在需要阻止向上冒泡的點擊事件里添加如下代碼，即可阻止向上冒泡。

// 阻止向上冒泡
window.event? window.event.cancelBubble = true : e.stopPropagation();
alert('文本框');

4.拓展

// 監聽點擊事件
window.addEventListener("click",function(){
    // html元素有點擊事件的話，這里最后執行
    // 沒有綁定點擊事件，點擊時，會執行這里
},false);// 執行順序：由里向外

　　

寫在最后

　　哪位大佬如若發現文章存在紕漏之處或需要補充更多內容，歡迎留言！！！

 相關推薦：

• 個人主頁