div等元素如何阻止點選穿透和實現點選穿透？

王铁柱6發表於2024-12-05
穿透

在前端開發中，阻止點選穿透（也稱為點選吞噬）和實現點選穿透是常見的需求，尤其是在處理疊加元素（例如彈出層、模態框）時。div 元素本身並沒有直接的“阻止點選穿透”或“實現點選穿透”屬性。我們需要結合 CSS 和 JavaScript 來實現這些效果。

1. 阻止點選穿透 (防止點選底層元素):

幾種常見的方法：

  • pointer-events: none; (推薦): 這是最簡潔有效的方法。將該 CSS 屬性應用於你想阻止點選穿透的元素。這意味著該元素及其子元素將不再成為滑鼠事件的目標。點選事件會“穿透”到其下面的元素。

    .overlay { /* 例如，一個覆蓋層 */
    pointer-events: none; 
}
.overlay > button { /* 但是，你想讓覆蓋層上的按鈕可以點選 */
    pointer-events: auto; /* 恢復按鈕的點選事件 */
}

  • e.stopPropagation() (JavaScript): 在點選事件的處理函式中使用 stopPropagation() 方法可以阻止事件冒泡到父元素。這適用於需要更精細控制的情況，例如只想阻止某些特定事件的穿透。

    const overlay = document.querySelector('.overlay');
overlay.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止點選事件冒泡
    // ...其他邏輯...
});

  • 透明遮罩層: 建立一個透明的 div 覆蓋在底層元素上，並捕獲點選事件。這種方法相對笨重，不如前兩種方法靈活，但有時在處理複雜佈局時可能有用。

2. 實現點選穿透 (允許點選底層元素):

  • pointer-events: none; 的反向應用: 如果之前使用了 pointer-events: none; 來阻止點選穿透，那麼只需將其移除或設定為 auto 即可恢復點選。

  • 在遮罩層上設定點選事件監聽，並將事件手動派發到底層元素: 這種方法比較複雜，需要獲取底層元素的座標並手動觸發點選事件。通常情況下不推薦使用，除非其他方法無法滿足需求。

    overlay.addEventListener('click', (e) => {
  const targetElement = document.elementFromPoint(e.clientX, e.clientY); // 獲取底層元素
  if (targetElement) {
    const clickEvent = new MouseEvent('click', {
      clientX: e.clientX,
      clientY: e.clientY,
      bubbles: true, // 允許事件冒泡
      cancelable: true,
    });
    targetElement.dispatchEvent(clickEvent); // 手動觸發點選事件
  }
});

選擇哪種方法？

pointer-events: none; 通常是首選方法，因為它簡潔、高效且易於理解。如果需要更精細的控制或處理一些特殊情況，可以使用 e.stopPropagation()。 避免使用手動派發事件，除非絕對必要。

總結:

理解 pointer-events 和 stopPropagation() 是處理點選穿透的關鍵。選擇合適的方法可以使你的程式碼更簡潔、易於維護，並提供更好的使用者體驗。

相關文章