More than 5 years have passed since last update.

CSS の pointer-events プロパティでマウスイベントを制御する

Last updated at 2014-08-11Posted at 2014-05-20

Twitter Bootstrap の .btn に .disabled をつけると、click イベントが発生してないことに今さら気がついて、なんでだろうと思ってコードをみてみたら、こういう指定があった。

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  pointer-events: none; /* これなに */
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}

pointer-events はデフォルト値 auto 、
これを none とすると、マウスイベントを拾わなくなるらしいです。

モダンブラウザではサポートされてるけど、IE は11から。

SVG のイベント制御もできるようなんですが、こちらはきちんと読んでないです。

パフォーマンスチューニングにも使えるらしい(らしい)

こういう使い方もあるのかー

60fps scrolling using pointer-events: none | The CSS Ninja - All things CSS, JavaScript & HTML

ref.

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up