それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

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

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

  pointer-events: none;

なぜ無効化するのか

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

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

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

    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');
    })

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

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

  pointer-events: none;

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

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

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

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

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

何に使うの?

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

コンテンツのコピペ防止に使うため?(てかその目的には使えない)

参考資料

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

広告を非表示にする