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;
}

構文

/* キーワード値 */
pointer-events: auto;
pointer-events: none;

/* SVG で使われる値 */
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;

/* グローバル値 */
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 イベントは、ポインティングデバイスが要素またはその子孫の 1 つに移動されたときに発行されます。そのため、 pointer-events: none が親要素に設定され、子要素に設定されていない場合でも、ポインターが子要素に移動したり、子要素から離れたりすると、親要素でイベントが発生します。

SVG のみ（HTML では実験的）

visiblePainted

SVG の場合のみ（HTML では実験的）の値です。要素の visibility プロパティに visible が設定されていて、かつ、例えば fill プロパティに none 以外の値が設定されている時の塗り (fill)、もしくは stroke プロパティが none 以外の時の線 (stroke) の上にマウスカーソルがある場合のみ、要素がポインターイベントのターゲットになりえます。

visibleFill

SVG の場合のみの値です。 visibility プロパティが visible にセットされていて、塗り (fill) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 fill プロパティの値でイベント処理が変化することはありません。

visibleStroke

SVG の場合のみの値です。 visibility プロパティが visible にセットされていて、線 (stroke) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 stroke プロパティの値でイベント処理が変化することはありません。

visible

SVG の場合のみ（HTML では実験的）の値です。 visibility プロパティが visible にセットされていて、塗り (fill) か線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fill プロパティや stroke プロパティの値でイベント処理が変化することはありません。

painted

SVG の場合のみ（HTML では実験的）の値です。 fill プロパティが none 以外にセットされている塗りの（すなわち fill ）要素、もしくは stroke のプロパティが none 以外にセットされている線の（すなわち stroke ）要素の上にマウスカーソルがいる場合にのみ要素がポインターイベントのターゲットになりえます。 visibility プロパティの値はイベントプロセスに影響を与えません。

fill

SVG の場合のみの値です。塗り (fill) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fill プロパティや visibility プロパティの値でイベント処理が変化することはありません。

stroke

SVG の場合のみの値です。線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 stroke プロパティや visibility の値でイベント処理が変化することはありません。

bounding-box

SVG のみ。要素がポインターイベントの対象となるのは、ポインターが要素の境界ボックス上にある場合のみです。

all

SVG の場合のみ（HTML では実験的）の値です。塗り (fill) と線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 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://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

CSS

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

結果

仕様書

ブラウザーの互換性

関連情報

• SVG 属性 pointer-events
• SVG 属性 visibility
• PointerEvent API
• (X)HTML で使うことを踏まえた WebKit の PointerEventsProperty の仕様書
• user-select - ユーザーがテキストを選択できるかどうかの制御