🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

CSS3 `pointer-events` 屬性：實現可穿透圖層的鼠標事件

在網頁開發中，我們通常會遇到多個元素重疊的情況。在這種情況下，如何使得被遮擋的元素仍然能夠響應鼠標事件呢？CSS3 引入了 pointer-events 屬性，允許開發者控制元素是否能夠接收鼠標事件。通過合理使用 pointer-events，可以使得圖層下的元素“穿透”上層元素的遮擋，響應用户的交互。

1. 基本語法

element {
  pointer-events: value;
}
php
36 Bytes
© 菜鳥-創作你的創作

pointer-events 屬性的可選值如下：

auto：默認值，表示元素會響應鼠標事件。
none：元素不會響應鼠標事件，即使它是可見的，鼠標點擊也不會被其捕獲。這樣就能實現“圖層穿透”的效果。
visiblePainted：表示元素不會響應鼠標事件，只有當元素可見時，鼠標事件才會被觸發。
visibleFill：表示元素不會響應鼠標事件，只有在圖形區域內鼠標才能觸發事件。
visibleStroke：表示元素不會響應鼠標事件，只有當圖形的邊框區域內鼠標才會觸發事件。
painted：元素會響應鼠標事件，但只有在其可見的部分。
fill、stroke、all：其他更細粒度的可選值，常用於 SVG 元素的控制。

2. 常見用途

2.1. 讓背景圖層“穿透”

通過 pointer-events: none，可以使得上層元素忽略鼠標事件，讓下層元素可以接收到這些事件。

例子：背景圖片不響應鼠標事件，點擊直接響應頁面下的按鈕

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pointer Events Example</title>
  <style>
    .background {
      width: 100vw;
      height: 100vh;
      background-image: url('https://via.placeholder.com/1920x1080');
      background-size: cover;
      pointer-events: none; /* 禁止背景圖層響應鼠標事件 */
    }
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
    }
    .button {
      padding: 10px 20px;
      color: white;
      background-color: #007bff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="background"></div>
  <div class="content">
    <button class="button" onclick="alert('按鈕點擊!')">點擊我</button>
  </div>
</body>
</html>

在上面的代碼中，背景圖通過 pointer-events: none 被設置為不可響應鼠標事件。即使背景圖層被覆蓋，用户點擊的是頁面中的按鈕，而不是背景。

2.2. 對 SVG 元素的控制

pointer-events 在 SVG 圖形中尤為重要，尤其是在繪製的路徑或圖形上。通常我們希望控制某些區域是否響應用户的鼠標事件。

例子：只有圖形邊框可以響應鼠標事件

<svg width="200" height="200">
  <!-- 填充部分不響應鼠標事件 -->
  <circle cx="100" cy="100" r="50" fill="red" pointer-events="none" />
  
  <!-- 邊框部分響應鼠標事件 -->
  <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="5" pointer-events="painted" />
</svg>

在上面的例子中，紅色的填充部分不響應任何鼠標事件，而圓形的邊框部分（黑色線條）可以響應鼠標事件。