[Javascript] 上位のエレメントのクリックイベントを無視させる方法

WEBアプリケーションを作成する時に、クリックイベントを取得する際に、手前にオブジェクトがあると、それが邪魔して下のオブジェクトをクリックできないんですが、これを強制的にクリックさせてしまいたい場合があります。 そんな時に便利なテクニックをメモっておきます。 ただし、今回はJavascript記事だが、内容はCSS処理である事を勘弁していただきたい。

どんな時に使うの？

ゲームや何かしらの管理システムなどの表示で、手前にオブジェクトをかぶせるように乗っけた場合、そのオブジェクトに穴を開けてその下のオブジェクトが抜けているように見せている場合、下のオブジェクトは絶対にクリックや、操作ができません。 ※ただし、入力フォームの場合は、「tab」キーでアクセスは可能です。 こうした時に上にかぶせているオブジェクトがクリックできてしまうのを、見えているが触れなくて通過するようにできます。

pointer-events

CSSの命令で「pointer-events」という便利なものがある。 対象のオブジェクトを表示できるが、クリックやマウス操作などのイベントは受け付けなくなるので実質上見えているが触れないオブジェクトが作成できる。

CSSでの記述

.div-object{ pointer-event:none; }

JSでの記述

document.getElementById("div_object").style.setProperty("pointer-event","none",""); 画像は見た目わかりやすく、かぶせているオブジェクトを薄い色にしてますが、実際は、見た目は何もかわりません。

懸念点

この方法、いいように思いますが、使う場面が限られるのでUIを十分に考慮して使うようにしましょう。 見えているのに触れないオブジェクトって非常に怖くないですか？ 透明度や透過画像など、見た目の工夫もさることながら、見えているのに気にならないという仕組みを考慮しないと、意図しない使いづらいUXになりかねるため、こうしたデザイン構築が苦手な人は敢えて使わない事をオススメします。