2017-12-17 14 views
0

特定のEventListenerを最後に(デフォルトアクションの前に)実行するようにEventTargetを追加したい場合に登録された順序とは別にを追加し、イベントがキャンセル可能でないことを意味しますこの目的を達成するために一度トリガーされた。EventListenerを最後に確実に実行する方法を教えてください。

イベントリスナー内で既に.addEventListenerを使用しようとしましたが、これは、イベントが発生した次回のイベントで実行されるEventListenerのみを登録します。 残念ながら、EventListenerListはDOM仕様の一部にはなりませんでした。つまり、.stopImmediatePropagationを使用し、最後に実行するアクションを実行する前に他のイベントを手動で実行するオプションではありません。

私はそれらが実行される順序を探していません、私は最新のブラウザエンジンが登録順にEventListenersを実行することを認識しています。私はその行動を迂回する方法について尋ねています(結果としてのみ)。

具体的な必要性はコンテンツスクリプト(つまり、追加された他のEventListeners(またはそれが起こる順序)を制御できないことを意味します)を使用する直前にURLを書き換えます。同じイベント中に自分の書き換えを行う。

現在の動作の一例:

// The content script: 
 
document.getElementById("target").addEventListener("click",last); 
 

 
function last() { 
 
    this.innerHTML="Correct!"; 
 
    console.log("This is supposed to occur last.") 
 
} 
 

 

 
// The webpage: 
 
document.getElementById("target").addEventListener("click",first); 
 

 
function first() { 
 
    this.innerHTML="Incorrect!"; 
 
    console.log("This is supposed to occur first.") 
 
}
<button id="target"> 
 
Click me! 
 
</button>

+0

コードを入力してください –

+2

[複数のイベントリスナーの順序](https://stackoverflow.com/questions/9512551/the-order-of-multiple-event-listeners) – cgTag

+0

の可能な複製がわかりましたら、クリックイベントの代わりにURL変更イベントを処理することもできます – Slai

答えて

0

:他のイベントリスナー内で非同期である他の機能がある場合はもちろん、あなたが完全に必要な遅延を予測することはできません可能ですイベントやevent.targetを処理するための要素であるかどうかを確認:

function first() { console.log('first') } 
 
function second() { console.log('second') } 
 
function last(e) { if (e.target.id === 'target') console.log('last') } 
 

 
target.addEventListener("click", first); 
 
document.body.addEventListener("click", last); 
 
target.addEventListener("click", second);
<button id="target"> 
 
    Click me! 
 
</button>

イベントのバブリングにより、ボタンイベントは親イベントの前に実行されます。

+0

恐ろしく、実用的な解決策のようです(少なくとも、実際にはバブルを起こすイベントの場合)! – hyperfekt

0

単純だが決してこれを達成するために、完全に健全な方法は、(setTimeoutをして、あなたが最後に発生するイベントをラップすることです)。これにより、実行が遅れることになります。代替はすべてのクリックを処理するかもしれない

function last() { 
 
    setTimeout(() => { 
 
    this.innerHTML=("Correct!"); 
 
    console.log("This is supposed to occur last.") 
 
    }) 
 
} 
 

 

 
// The webpage: 
 

 
document.getElementById("target").addEventListener("click",last); 
 
document.getElementById("target").addEventListener("click",first); 
 

 

 

 
function first() { 
 
    this.innerHTML="Incorrect!"; 
 
    console.log("This is supposed to occur first.") 
 
}
<button id="target"> 
 
Click me! 
 
</button>

+0

残念なことに、これは、ラップされたコードがデフォルトのアクションの後に*実行される結果となり、(特にアンカー要素に適用された場合)同じ結果を達成しません。しかし、この要件を満たさないケースでは良い解決策です。 – hyperfekt

+0

デフォルトのアクションを防止したいのですが、event.preventDefaultがあなたのために機能していませんか? – Shadowfool

+0

私は質問の中で取り消しできないイベントを特に指していました。つまり、.preventDefaultはオプションではありません。 – hyperfekt

関連する問題