如何防止子元素的單擊事件觸發父元素的雙擊事件？

巧妙避免子元素點擊與父元素雙擊事件沖突

前端開發中，子元素點擊事件與父元素雙擊事件的沖突常常令人頭疼。 尤其當快速點擊子元素時，容易誤觸發父元素的雙擊事件。本文提供兩種方法有效解決此問題。

假設html結構如下：

<div>     <div></div> </div>

以及對應的事件處理函數：

showPreset(Event) {     console.log('aaaaa'); }  changeFullScreen() {     console.log('bbbb'); }

簡單的event.stopPropagation()或return false無法解決此問題，因為點擊事件和雙擊事件是不同的事件類型。

方法一：在子元素上添加空雙擊事件

在子元素上綁定一個空的雙擊事件處理函數，阻止雙擊事件冒泡：

nothingFn() {}; // 空函數，不做任何操作  // ... 其他代碼 ...

將nothingFn綁定到子元素的雙擊事件上，即可阻止雙擊事件向上冒泡，從而避免觸發父元素的changeFullScreen函數。

方法二：基于事件目標元素判斷

利用事件冒泡機制，通過檢查event.target判斷雙擊事件的觸發源。 如果是父元素，則執行changeFullScreen；如果是子元素，則忽略。 這種方法需要修改雙擊事件的處理邏輯，使其能夠區分事件源。

通過以上兩種方法，可以有效地防止子元素點擊事件觸發父元素雙擊事件，從而避免事件沖突。 選擇哪種方法取決于具體的項目需求和代碼結構。