ポインタイベント

要素がポインタイベントに応答するかどうかを制御するためのユーティリティ。

Class reference

Class
Properties
.pointer-events-nonepointer-events: none;
.pointer-events-autopointer-events: auto;

使用方法

.pointer-events-autoを使用して、ポインタイベント(:hoverclickなど)のデフォルトのブラウザ動作に戻します。

.pointer-events-noneを使用して、要素にポインタイベントを無視させます。 ポインタイベントは引き続き子要素でトリガーされ、ターゲットの「下」にある要素にパススルーされます。

Try clicking the caret icon to open the dropdown

.pointer-events-auto (event captured)

.pointer-events-none (event passes through)

<div class="relative">
  <select class="...">
    <option>Indiana</option>
    <option>Michigan</option>
    <option>Ohio</option>
  </select>
  <div class="pointer-events-auto ...">
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
  </div>
</div>

<div class="relative">
  <select class="...">
    <option>Indiana</option>
    <option>Michigan</option>
    <option>Ohio</option>
  </select>
  <div class="pointer-events-none ...">
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
  </div>
</div>

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはpointer event utilitiesのために作られます。

あなたはどのバリアントがpointer event utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのpointerEventsプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     pointerEvents: ['responsive'],
+     pointerEvents: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしpointer event utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのpointerEvents propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     pointerEvents: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!