前端事件沖突：巧妙避免子元素雙擊觸發父元素事件
在前端開發中，父元素和子元素事件的沖突是一個常見問題。本文將探討如何避免快速雙擊子元素時，觸發父元素的雙擊事件。
問題描述
假設一個父元素包含一個子元素，父元素綁定了雙擊事件（dbclick），子元素綁定了點擊事件（click）。當快速雙擊子元素時，父元素的雙擊事件也會被觸發。 阻止click事件冒泡或返回false并不能解決此問題。
示例代碼：
<div id="parent"> <div id="child"></div> </div>
JavaScript代碼 (示例，實際代碼可能更復雜):
const parent = document.getElementById('parent'); const child = document.getElementById('child'); parent.addEventListener('dblclick', changeFullScreen); child.addEventListener('click', showPreset); function showPreset(event) { console.log('aaaaa'); } function changeFullScreen() { console.log('bbbb'); }
解決方案
問題根源在于事件冒泡和雙擊事件的機制。dblclick事件實際上是兩個連續的click事件，阻止單個click事件的冒泡無法阻止dblclick事件的冒泡。
我們提供兩種有效的解決方案：
方法一：在子元素上添加空雙擊事件
在子元素上也綁定一個dblclick事件，但該事件不執行任何操作。這有效地攔截了雙擊事件的冒泡。
child.addEventListener('dblclick', function(e) { e.stopPropagation(); }); //阻止冒泡
方法二：事件目標判斷
在父元素的dblclick事件處理函數中，檢查事件目標(event.target)是否為父元素本身。只有當目標是父元素時，才執行雙擊操作。
parent.addEventListener('dblclick', function(event) { if (event.target === parent) { changeFullScreen(); } });
這兩種方法都能有效地防止子元素的快速雙擊觸發父元素的雙擊事件，選擇哪種方法取決于具體代碼結構和個人偏好。 方法一更簡潔，方法二更靈活，適用于更復雜的事件處理邏輯。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
