stopImmediatePropagationによってクリックイベントを登録することができなくなった要素に対して、改めてクリックイベントを設定する方法を知りたい

Question

前提・実現したいこと

stopImmediatePropagationによってクリックイベントを登録することができなくなった要素に対して、改めてクリックイベントを設定する方法を知りたいです。

理由

Squarespaceを利用したサイトに対してカスタマイズを試みています。
Squarespaceでクリックイベントが設定されている要素に対して、別の処理をさせたくJavascriptで試したところ、うまくできませんでした。
調べたところ、以下のことが分かってきました。

1. SquarespaceのテンプレートはYUIというライブラリを利用している。
2. stopImmediatePropagationによって、クリックイベントの上書きができなくなっている。
3. Squarespaceの仕様上、squarespaceで用意しているJavascriptよりも先に自作のスクリプトを読み込ませることはできない。
4. JQueryは使用していない（JQueryのstopImmediatePropagationではない）。
5. クリックイベントをカスタマイズしようとしている要素はドキュメント読み込み時には表示されていない（ドキュメント読み込み時にセレクタ指定して要素を取得することは難しい）
6. 運用上、Squarespaceで用意されたソースコード自体は変更したくない。

対策
まず、3.の理由からSquarespaceよりも先に自作のスクリプトを読み込ませ、stopImmediatePropagationの先手を打つはできそうにありません。
すでに、stopImmediatePropagationが設定されてしまった要素に対してなんとかする必要があると考えています。
注意点としては、以下のことが考えています。
4.の理由からJQueryによる解決は難しいと考えています。

どなたか、解決策をご教示お願いします。

Answer 1

EventTarget#dispatchEvent()

• 2.7. インタフェース EventTarget - DOM Standard 日本語訳

dispatchEvent() で無効化したclickイベントを再発火させて下さい。

Capture Phase

• 3.1. イベント配送と DOM イベントフロー - UI Events （日本語訳）

既存イベントがBubbling Phaseで捕獲しているなら、Capture Phaseで捕まえて下さい。

Event#stopImmediatePropagation()

• 2.2. インタフェース Event - DOM Standard 日本語訳

1. JQueryは使用していない（JQueryのstopImmediatePropagationではない）。

stopImmediatePropagation() は標準化されていますが、jQueryがどう関わっているのでしょうか。

Re: moccow さん

Comments

[moccow]

think49さん

回答ありがとうございます！
Capture Phaseをtrueにすることで、今まで発火できなかったイベントを取得できるようになりました。
しかし、Squaresupace（yui）で用意されているlightbox的なUIに乗っているオブジェクトのイベントが拾えません。。
lightboxはコンテンツの画像をクリック時に表示されるもので、つまり後から追加されるためにうまくイベントが拾えないのではないかと考えています。
以下のように、documentにeventLisnerを付加することで拾えるかを試したのですが、うまくいきません。

```javasript
document.addEventListener('click', hogeFunc, true);
```

何か良い方法をお知りでしたら、教えていただきたく思います。

jqueriについて触れたのは、squarespaceでjqueryを使っていないので、jqueryを用いた解決法はうまく行かない可能性が高いと考えたからです。

[think49]

> lightboxはコンテンツの画像をクリック時に表示されるもので、つまり後から追加されるためにうまくイベントが拾えないのではないかと考えています。
Squaresupaceで定義されているイベントタイプ、要素ノード等の情報をコードから読み取って下さい。
同じノードに対して同じイベントタイプを指定している限りは、Capture PhaseはBubbling Phaseに必ず先行して発火します。

[moccow]

document.addEventLisner('click', hogeFunc, true);
↑documentにリスナーを設置しているのなら、イベントが拾えないのはオブジェクトが後から追加されているかとは関係なく、別の原因があると考えるべきということでよろしいでしょうか。
また、“要素ノード等の情報”を読み取る際の勘どころのようなものがありましたら教えていただきたいです。

[think49]

> document.addEventLisner('click', hogeFunc, true);
後からdocumentが動的に生成されているのなら、捕捉出来ないでしょう。
あるいは、windowやdocumentでキャプチャリングフェーズを使用されていても同様でしょう。
親記事のイベントフローの流れを再読して下さい。

> また、“要素ノード等の情報”を読み取る際の勘どころのようなものがありましたら教えていただきたいです。
何度もいいますが、イベント定義部分のコードを読み取って下さい。
addEventListenerやonclick等でgrepするなどすれば良いと思います。

[moccow]

documentが追加という可能性もあり得るのですね。。
“要素ノード等の情報”、それがなかなか難しいのですが、、改めて挑んでみます。

[think49]

現在のdocumentは無理だと思いますが、iframe要素等で独立したdocumentが出来ているなら、参照先を変更する事でdocumentを作り直す事は原理的には可能です(そうするメリットはあまり思いつきませんが)

[think49]

> “要素ノード等の情報”、それがなかなか難しいのですが、、改めて挑んでみます。
探すべきは要素ノードではなく、Event Listenersの方だと思います。
https://developers.google.com/web/tools/chrome-devtools/console/events?hl=ja