pointer-events
==============

**`pointer-events`** は CSS のプロパティで、特定のグラフィック要素がポインターイベントの対象になる可能性のある環境（存在する場合）を設定します。

試してみましょう
--------

構文
--


```css
/\* キーワード値 \*/
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /\* SVG のみ \*/
pointer-events: visibleFill; /\* SVG のみ \*/
pointer-events: visibleStroke; /\* SVG のみ \*/
pointer-events: visible; /\* SVG のみ \*/
pointer-events: painted; /\* SVG のみ \*/
pointer-events: fill; /\* SVG のみ \*/
pointer-events: stroke; /\* SVG のみ \*/
pointer-events: all; /\* SVG のみ \*/

/\* グローバル値 \*/
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` の別の値をセットされていた場合は、その子孫要素自体はポインターイベントのターゲットとなりえます。その場合、ポインターイベントはイベントキャプチャ/バブリングの過程で必要に応じて親要素のイベントリスナーをトリガーします。

#### 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` の値でイベント処理が変化することはありません。

`all`

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

解説
--

このプロパティが指定されないと、 `visiblePainted` の値の同じ性質が SVG コンテンツに適用されます。

値を `none` に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

`pointer-events` を使用して要素がポインターイベントのターゲットとなることを防止するということは、必ずしもその要素のイベントリスナーが起動されない、することができないという意味ではありません。仮に要素の子要素のひとつで、 `pointer-events` がポインターイベントのターゲットになるよう明示的に設定されていた場合、その子要素をターゲットにするどのようなイベントも親要素を通過し、その際に親要素に設定されたイベントリスナーを起動します。もちろん、これらの子要素に触れず親要素にだけ触れるマウスの動きは、子要素と親要素のどちらにも捕まえられることはありません (親要素を「通過」し、その下にあるものがターゲットになります)。

`pointer-events: none` を持った要素は、 `Tab` キーを使用したキーボードナビゲーションによってフォーカスを受け取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

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

例
-

### 基本的な例

この例では、すべての画像のポインターイベント (クリック、ドラッグ、ホバー等) を無効にします。


```css
img {
  pointer-events: none;
}
```

### リンクの無効化

この例では、 `http://example.com` へのリンクのポインターイベントを無効にします。

#### HTML


```html
<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
```


#### CSS


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


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # pointer-events-control |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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