LoginSignup
19

More than 5 years have passed since last update.

上層レイヤーのDOMを通過させて、下層レイヤーにクリックイベントを発火させるには

Posted at

マークアップの構造として、最上位層にフィルターもしくはマスクのようなDOMを画面全体の大きさで配置したとします。
こうした場合、そのDOMが全てのクリックイベントを遮ってしまうため、
下層にあるDOMに対してクリックイベントやホバーイベントが発火することがなくなってしまいます。

たまにこういうケースに演出上やむを得ず突き当たる場合があると思います。

これを解決することのできるCSS3のプロパティとして、

pointer-events: none;

があります。

pointer-events: none;

を、クリックイベントを発火させたくないDOM、つまり前述したケースだと
最上位層のDOMに対して設定することで、そのDOMに対して発生したイベントは無視され、
下層のイベントに対してイベントが発火してくれるようになります。

つまり、クリックイベントがDOMを通過してくれるようなイメージです。

しかし、この pointer-events プロパティはIEだと11からしかサポートしていないため、
実務においてはあまり実用的であるとは言えません。

古いIEブラウザまでサポートするように同様の機能を実装するには、
クリックイベントが発火した位置と、イベントの受け皿としたいDOMの位置とをoffsetパラメータ等を用いて比較し、
一致した場合にはイベントをtriggerで発火させるといった強引なやり方が必要になりそうです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19