画像Buttonのclickイベントが発火しないとき

画像Buttonのクリックイベントが発火せず、けっこう悩みました。
 

 デベロッパーツールのコンソールには特にエラーなど表示されず。

またクリックイベントも登録された状態になっています。登録忘れや削除されてしまったなどではないようです。

 

 

問題の起こったボタンがjsで生成した直後のもので、他のところではすでに同じような画像Buttonで問題なくclickイベントが動作していました。

状況的に「documentツリー内にappendしてからでないとダメなのか？」などと疑ったり試したりと悩んだものの、原因はそれではなく。

理由は全く別のところにありました。

 そもそもHTMLで「画像ボタン」 を実装する方法はいくつも種類があります。

img要素のclickイベントをListenするとか。

その中で今回はSVGを使う都合から、「Button要素にObject要素を入れて、Object要素でSVGを表示」という方法を取っていました。

 つまりこれです。

<button class="layer_is-visible">

<object data="resource/layer/is-visible-open.svg" type="image/svg+xml"></object>

</button>

 

さんざんListenの方法やタイミング、ターゲットを変えてと一通り試してから、そういえばかなり初期に画像ButtonにCSS設定していたな、 と思い出して確認したところそこに正解がありました。

CSSにて以下を記載。

/* click event Buttonのclickイベントを動作させる */

button object{

pointer-events: none;

}

 以上です。

 

恐らくButtonのchildrenにObjectがあることで、ClickイベントをObjectが受け取り下のButtonまでたどり着かないということなのだと思います。

 

CSS設定を忘れたまま別の箇所で意図しない影響が出ないよう、CSSセレクタでターゲットを絞っていたのが裏目に出ました。今度こそドキュメント全体に影響するよう変更したので、もう次からはドキュメントのどこでSVG画像ボタンを使っても大丈夫です。

...恐らく。

 

 ここでひとつ罠なのは、「内側のObject要素がClickイベントを受け止めているからButtonにClickが発生しない」にもかかわらず、「ならばとObject要素でClickイベントをListenerしても、これもまた発火しない」という部分。

（Object要素の中のSVGが要素扱いでClickイベントを受けているのかもしれないけれど、だったらデベロッパーツールでObject要素内のSVG まで展開されるのが一貫性というものでは？　などと思ったり。）

 

なんというか「こういう設計（挙動）になっているきっと合理的な理由があるのだろうけれど、そんなのユーザにはわかりっこないよ！（要約）」というやつの気がします。

DOMイベント構造は複雑怪奇。