画像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イベント構造は複雑怪奇。

0 件のコメント:

コメントを投稿

ドラッグ可能なHTMLダイアログ(pure javascript)

 ファイルを開くダイアログならともかく、Itemの回転ダイアログなどは画面に被っていると、編集対象が隠れてダイアログ操作しずらくなってしまいます。 そこでモーダルダイアログ をドラッグで移動できるようにする必要があります。 HTMLのダイアログの場合、ドラッグ可能にするにはJSが...