如何防止子元素的單擊事件影響父元素的雙擊事件？

巧妙解決子元素點擊與父元素雙擊事件沖突

在父元素綁定雙擊事件(dblclick)，子元素綁定單擊事件(click)時，快速點擊子元素可能誤觸發父元素的雙擊事件。本文提供兩種方法有效避免此沖突。

假設如下代碼結構：

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

對應函數：

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

直接阻止冒泡或使用event.stopImmediatePropagation()并不能解決問題，因為單擊和雙擊事件是不同事件類型。 關鍵在于阻止子元素的雙擊事件冒泡。

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

在子元素上添加一個雙擊事件，但不執行任何操作，只阻止事件冒泡：

nothingFn(event) {   event.stopPropagation(); };

方法二：事件源判斷

在父元素的雙擊事件處理函數中，檢查事件源event.target：

changeFullScreen(event) {     if (event.target === this.$el) { // this.$el 指向父元素         console.log('bbbb');     } }

只有當事件源是父元素本身時，才執行雙擊事件。

通過以上兩種方法，可以有效防止子元素的點擊事件干擾父元素的雙擊事件，確保程序邏輯的正確性。