divのポインタイベントの停止をCSSでやるpointer-events（クリック禁止を手軽にやるCSS）

CSS でマウスポインタのイベントを全部disabledにすることが出来る

  pointer-events: none;

なぜ無効化するのか

div を複数枚重ねてて、前面のイベントを無視したいとか、Divを透過させててクリックイベントを暴発させたくない時がある。

サンプル１: ポインタイベントを解釈する場合

イベント登録しているので、クリックするとログに書かれます。

    document.querySelector('div.sampleBox2 > div.wrapper').addEventListener('click', function(e){
      sample_box1_console.log('b','wrapper click');
      
    });
    document.querySelector('div.sampleBox2 > div.wrapper > div.box1').addEventListener('click', function(e){
        sample_box1_console.log('a','box1 click');
    })

サンプル２　クリックなどのポインタ動作を無視する

イベント登録しているけど、何も起きない例です。CSSを入れたのがコレです。

  pointer-events: none;

propagation するので、イベントが透過する。

もちろんPropagationがあるのでイベントがバブリングして透過するので、前面のイベント拾っても後ろに 透過するんです。

透過Divのクリックイベントも透過させることは最初から出来るので

前面のdiv側にpointer-events: none;を入れてやれば、前面のDIVのイベントハンドラ登録はそのままで一気に無効化出来る。

透過Divのクリックイベント透過させるように見せかけられるとうわけだ

何に使うの？

スクロール中の Hover イベントの暴発を防いだり、ボタンを一時的に押せなくしたり。ドラッグ中の暴発を防いだり。とにかく便利ですね。

コンテンツのコピペ防止に使うため？（てかその目的には使えない）

参考資料

https://developer.mozilla.org/en/docs/Web/CSS/pointer-events