pointer-events

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính pointer-events là một thuộc tính trình bày cho phép xác định liệu một phần tử có thể là đích của sự kiện chuột hay khi nào phần tử đó có thể là đích.

Note: Là một thuộc tính trình bày, pointer-events cũng có thuộc tính CSS tương ứng: pointer-events. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.

Bạn có thể dùng thuộc tính này với các phần tử SVG sau:

Example

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  Hình tròn sẽ luôn chặn sự kiện chuột.
  Để thay đổi màu của hình chữ nhật bên dưới, bạn phải
  nhấp bên ngoài hình tròn
  -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePainted" />

  <!--
  Hình tròn bên dưới sẽ không bao giờ bắt sự kiện chuột.
  Hình chữ nhật bên dưới sẽ đổi màu dù bạn nhấp vào
  hình tròn hay chính hình chữ nhật
  -->
  <rect x="10" y="0" height="10" width="10" fill="black" />
  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>

window.addEventListener("mouseup", (e) => {
  // Hãy chọn một màu ngẫu nhiên trong khoảng #000000 đến #FFFFFF
  const color = Math.round(Math.random() * 0xffffff);

  // Hãy định dạng màu để phù hợp với yêu cầu của CSS
  const fill = `#${color.toString(16).padStart(6, "0")}`;

  // Hãy áp dụng màu cho phần tử mà chúng ta
  // thực sự đã nhấp vào
  e.target.style.fill = fill;
});

Usage notes

Value	`bounding-box` \| `visiblePainted` \| `visibleFill` \| `visibleStroke` \| `visible` \| `painted` \| `fill` \| `stroke` \| `all` \| `none`
Default value	`visiblePainted`
Animatable	Yes