pointer-eventsプロパティ
pointer-eventsプロパティは、マウスポインターのイベントに反応するか、反応しないかを指定するプロパティです。
マウスポインターのイベントとはクリックイベントとも呼ばれ、クリックやホバーのことで、クリックやホーバーに反応しないようにできます。
pointer-events: none;
リンクがあるテキスト上でマウスポインターをホーバーするとリンク用に変わりますが、pointer-events: none;にすると通常のポインターのままです。
構文(Syntax)
CSS
pointer-events: auto | none | initial | inherit;
DOM(JavaScript)
String = object.style.pointerEvents;
object.style.pointerEvents="auto | none | initial | inherit";
値(Values)
Value | 摘要 |
---|---|
auto | 初期値(default値) |
none | マウスポインターのイベントを無効に |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | auto |
継承(Inherited) | Yes |
CSS Animation | No |
Example
pointer-eventsの例です。none値でクリックに反応しないようにできます。
さらに、リンクがあるテキスト上でマウスポインターをホーバーすると通常はリンク用に変わりますが、通常のポインターのままになります。
関連(Related)
HTML、CSS、DOMのマウス、キーボード、タッチデバイス、カーソルに関する用途一覧です。
HTML
CSS
DOM
- 全般
-
- インターフェイス
- UiEvent
- イベント
- which
- プロパティ
- altKey、 ctrlKey、 metaKey、 relatedTarget、 shiftKey
- メソッド
- getModifierState()
- マウス
-
- インターフェイス
- DragEvent、 MouseEvent
- イベント
- click、 contextmenu、 dblclick、 dragend、 dragenter、 dragleave、 dragover、 dragstart、 drop、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 show、 onwheel
- プロパティ
- button、 buttons、 clientX、 clientY、 code、 deltaMode、 deltaX、 deltaY、 deltaZ、 pageX、 pageY、 screenX、 screenY
- メソッド
- キーボード
- タッチデバイス
-
- インターフェイス
- TouchEvent
- イベント
- touchcancel、 touchend、 touchmove、 touchstart、 transitionend
- プロパティ
- メソッド