[解決済み] DOMイベントのクローンや再ディスパッチを行うには?
2023-06-20 22:16:33
質問
DOMイベントのみを複製または再派遣する、シンプルで抽象的な方法を探しています。私は DOM ノードのクローンには興味がありません。
私は少し実験を行い、その結果 DOM イベントの仕様 を読んでみましたが、明確な答えは見つかりませんでした。
理想的には、私は次のような単純明快なものを探しています。
handler = function(e){
document.getElementById("decoy").dispatchEvent(e)
}
document.getElementById("source").addEventListener("click", handler)
このコード例は、もちろんうまくいきません。イベントが現在ディスパッチされていることを示す DOM 例外が発生します - 明らかです。
で新しいイベントを手動で作成するのは避けたいですね。
document.createEvent()
で新しいイベントを作成し、それらを初期化してディスパッチすることを避けたい。
このユースケースに対する簡単な解決策はありますか?
どのように解決するのですか?
私は、質問が古く、OPは作成/初期化アプローチを避けたかったことを知っていますが、イベントを重複させる比較的簡単な方法があります。
new_event = new MouseEvent(old_event.type, old_event)
マウスイベント以外も欲しい場合は、以下のような方法もあります。
new_event = new old_event.constructor(old_event.type, old_event)
そして、元の文脈では
handler = function(e) {
new_e = new e.constructor(e.type, e);
document.getElementById("decoy").dispatchEvent(new_e);
}
document.getElementById("source").addEventListener("click", handler);
(jQueryをお使いの方:この場合、(1)のように
e.originalEvent.constructor
の代わりに
e.constructor
)
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptでイベントを発生させるには?
-
[解決済み] jQueryでオブジェクトに登録されたイベントハンドラを検索する
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] ECMAScriptとは?
-
[解決済み] 変異を伴わないオブジェクトからの値の削除