以前に他の要素で処理されたことがない場合にのみ、マウス イベントを処理するスクリプトを作成しています。
イベント リスナーをドキュメント オブジェクトにアタッチできますが、既に処理されているかどうかに関係なく、すべてのイベントを受信します。
HTML ページの要素を制御できないため、イベントの処理時に手動で Propagation() を停止することはできません。
何か案は?
以前に他の要素で処理されたことがない場合にのみ、マウス イベントを処理するスクリプトを作成しています。
イベント リスナーをドキュメント オブジェクトにアタッチできますが、既に処理されているかどうかに関係なく、すべてのイベントを受信します。
HTML ページの要素を制御できないため、イベントの処理時に手動で Propagation() を停止することはできません。
何か案は?
したがって、特定の一連の状況下で、自分が望むようなことを達成できます。具体的には、
事実上、ターゲット要素の元の addEventListener メソッドを、呼び出しをインターセプトし、いくつかの特別な処理を行い、通常どおり続行できるカスタム メソッドに置き換えるだけです。この「特別な処理」は、元のコールバックをラップし、イベント引数を何らかの状態でマークして、他の誰かが既にイベントを処理したことを知らせる新しい関数です。これが概念実証です(jsFiddleを使用)
ターゲット HTML:
<div id='asdf'>asdf</div>
JavaScript:
var target = document.getElementById('asdf');
var original = target.addEventListener;
var updated = function(){
// Grab the original callback, so we can use it in our wrapper
var originalFunc = arguments[1];
// Create new function for the callback, that lets us set a state letting us know it has been handled by someone
// Finish the callback by executing the original callback
var newFunc = function(e){
console.log('haha, intercepted you');
e.intercepted = true;
originalFunc.call(this, e);
};
// Set the new function in place in the original arguments 'array'
arguments[1] = newFunc;
// Perform the standard addEventListener logic with our new wrapper function
original.apply(this, arguments);
};
// Set the addEventListener on our target to our modified version
target.addEventListener = updated;
// Standard event handling
target.addEventListener('click', function(e){
console.log('original click');
console.log('intercepted?', e.intercepted);
})
この記事はこちらから。
これを行うことはまだ可能ではないようです。
どのイベント ハンドラーが登録されていますか?
W3C のイベント登録モデルの現在の実装の問題の 1 つは、イベント ハンドラーが既に要素に登録されているかどうかを確認できないことです。従来のモデルでは、次のことができます。
alert(element.onclick)
登録されている関数、または何も登録されていない場合は未定義の関数が表示されます。ごく最近の DOM レベル 3 イベントでのみ、W3C は
eventListenerList
要素に現在登録されているイベント ハンドラーのリストを格納します。この機能はまだどのブラウザでもサポートされていません。新しすぎるためです。ただし、この問題は解決されています。
幸運
removeEventListener()
削除したいイベントリスナーが要素に追加されていない場合、エラーは発生しません。そのため、疑わしい場合はいつでも removeEventListener() を使用できます。