pointer-events

試一試

pointer-events: auto;

pointer-events: none;

pointer-events: stroke; /* SVG-only */

pointer-events: fill; /* SVG-only */

<section class="flex-column" id="default-example">
  <div id="example-element">
    <p>
      <a href="#">example link</a>
    </p>
    <p>
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <a xlink:href="#">
          <circle
            cx="50"
            cy="50"
            fill="#3E6E84"
            r="40"
            stroke="#ffb500"
            stroke-width="5"></circle>
          <text fill="white" text-anchor="middle" x="50" y="55">SVG</text>
        </a>
      </svg>
    </p>
  </div>
</section>

#example-element {
  font-weight: bold;
}

#example-element a {
  color: #009e5f;
}

#example-element svg {
  width: 10em;
  height: 10em;
}

語法

/* Keyword values */
pointer-events: auto;
pointer-events: none;

/* Values used in SVGs */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

pointer-events 屬性被指定為從下面值列表中選擇的單個關鍵字。

值

auto

元素的行為與未指定 pointer-events 屬性時相同。在 SVG 內容中，此值和 visiblePainted 值具有相同的效果。

none

元素本身永遠不會是指標事件的目標。但是，透過將 pointer-events 設定為其他值，其子樹可以保持可被定位。在這種情況下，指標事件將在事件捕獲和冒泡階段，在事件傳遞到或離開後代元素時，適當地觸發此父元素上的事件監聽器。

注意：當指向裝置移動到元素或其後代中時，會觸發 pointerenter 和 pointerleave 事件。因此，即使在父元素上設定了 pointer-events: none 而未在子元素上設定，在指標移入或移出後代元素後，事件仍會在父元素上觸發。

僅限 SVG（對 HTML 實驗性）

visiblePainted

僅限 SVG（對 HTML 實驗性）。只有當 visibility 屬性設定為 visible 並且例如，當滑鼠游標位於元素的內部（即“填充”）並且 fill 屬性設定為非 none 值時，或者當滑鼠游標位於元素的周長（即“描邊”）並且 stroke 屬性設定為非 none 值時，該元素才能成為指標事件的目標。

visibleFill

僅限 SVG。只有當 visibility 屬性設定為 visible 並且例如，當滑鼠游標位於元素的內部（即填充）時，該元素才能成為指標事件的目標。fill 屬性的值不影響事件處理。

visibleStroke

僅限 SVG。只有當 visibility 屬性設定為 visible 並且例如，當滑鼠游標位於元素的周長（即描邊）時，該元素才能成為指標事件的目標。stroke 屬性的值不影響事件處理。

visible

僅限 SVG（對 HTML 實驗性）。當 visibility 屬性設定為 visible 並且例如，滑鼠游標位於元素的內部（即填充）或周長（即描邊）時，該元素可以成為指標事件的目標。fill 和 stroke 的值不影響事件處理。

painted

僅限 SVG（對 HTML 實驗性）。只有當例如，滑鼠游標位於元素的內部（即“填充”）並且 fill 屬性設定為非 none 值時，或者當滑鼠游標位於元素的周長（即“描邊”）並且 stroke 屬性設定為非 none 值時，該元素才能成為指標事件的目標。visibility 屬性的值不影響事件處理。

fill

僅限 SVG。只有當指標位於元素的內部（即填充）時，該元素才能成為指標事件的目標。fill 和 visibility 屬性的值不影響事件處理。

stroke

僅限 SVG。只有當指標位於元素的周長（即描邊）時，該元素才能成為指標事件的目標。stroke 和 visibility 屬性的值不影響事件處理。

bounding-box

僅限 SVG。只有當指標位於元素的邊界框上時，該元素才能成為指標事件的目標。

all

僅限 SVG（對 HTML 實驗性）。只有當指標位於元素的內部（即填充）或周長（即描邊）時，該元素才能成為指標事件的目標。fill、stroke 和 visibility 屬性的值不影響事件處理。

描述

當未指定此屬性時，visiblePainted 值的相同特性適用於 SVG 內容。

除了指示元素不是指標事件的目標之外，值 none 指示指標事件“穿過”該元素並改為定位該元素“下方”的任何內容。

請注意，透過使用 pointer-events 阻止元素成為指標事件的目標，這不一定意味著該元素上的指標事件監聽器不能或不會被觸發。如果該元素的某個子元素明確設定了 pointer-events 以允許該子元素成為指標事件的目標，那麼任何以該子元素為目標的事件都將在事件沿父鏈傳播時穿過父元素，並適當地觸發父元素上的事件監聽器。當然，任何螢幕上被父元素覆蓋但未被子元素覆蓋的點的指標活動都不會被子元素或父元素捕獲（它將“穿過”父元素並定位其下方的內容）。

具有 pointer-events: none 的元素仍將透過使用 Tab 鍵進行順序鍵盤導航來接收焦點。

正式定義

正式語法

pointer-events = 
  auto            |
  bounding-box    |
  visiblePainted  |
  visibleFill     |
  visibleStroke   |
  visible         |
  painted         |
  fill            |
  stroke          |
  all             |
  none            

示例

停用所有影像上的指標事件

此示例停用所有影像上的指標事件（點選、拖動、懸停等）。

img {
  pointer-events: none;
}

停用單個連結上的指標事件

此示例停用指向 http://example.com 的連結上的指標事件。

HTML

<ul>
  <li><a href="https://mdn.club.tw">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

CSS

a[href="http://example.com"]
{
  pointer-events: none;
}

結果

規範

瀏覽器相容性

另見

• user-select
• SVG pointer-events 屬性
• SVG visibility 屬性
• PointerEvent