JavaScriptイベントの呼び出しを傍受する（常に呼び出されるようにイベントリスナーを追加する）

Question

イベントリスナーがイベントの通知を受け取らないようにして、別のイベントリスナーが処理を進めることを確認する前に。

最初の考えでは、イベントリスナーをバインドして、その要素の他のすべてのイベントリスナーをトリガーするかどうかを、チェーン内の最初のイベントリスナーとして判断することでした。これを調べてみると、少なくとも、イベントリスナーが要素にバインドされている方法の組み合わせでは不可能ではないようです。

私は、Webページ上の項目のリストを持っている：

は、いくつかのコンテキストを提供します。ユーザーがこれらの「アイテムリンク」の1つをクリックすると、ページの別の領域にフォームが入力され、ユーザーはアイテムのプロパティの一部を変更できます。変更されたアイテムのプロパティを永続化するには、フォームに関連する「更新」ボタンをクリックする必要があります。

私の目的は、ユーザーが「更新」をクリックせずにアイテムのプロパティを変更した後、別の「アイテムリンク」をクリックすると、直前に行った変更を無視してよいことを確認することです。

マイ未遂ソリューション：

1. バインドの変更イベントリスナーをtrueにするJavaScript「hasChanges」フィールドを設定し、すべてのフォーム要素へ。
2. クラスをすべての「アイテムリンク」に追加します。このクラスによって、ユーザーが変更を緩める原因となるリンクとして識別されます。
3. jQueryを使用して、このクラスを持つすべての要素にclickおよびkeypressイベントリスナーをバインドし、 'hasChanges'がtrueの場合は確認ポップアップを表示します。
4. 変更を保存する場合は、[キャンセル]をクリックして、イベントの伝播を停止します。これで

問題は、「アイテムリンク」要素がすでにユーザーが項目のプロパティを変更することを可能にするページのセクションを更新する（Java）のSpring AJAX decorationクリックイベントリスナーを持っており、これは常に前に呼び出されていることです確認を表示するイベントリスナー現実的には、ページのアイテムプロパティフォームセクションが更新される前に確認が表示されるように、AJAXデコレーションの前に進むことを確認するイベントリスナーをバインドすることはできません。

誰にも提案はありますか？

ありがとうございます。

更新：

提案された解決策をtrueに 'caputre' フラグを設定することでした。だから今「アイテムリンク」にイベントリスナーを追加します私のコードは次のようになります。

$("." + linkClassName).each(function() 
{ 
    if ($.browser.msie) 
    { 
     this.setCapture(true); 
     this.attachEvent("onclick", _self.linksFunction); 
    } 
    else 
    { 
     this.addEventListener("click", _self.linksFunction, true); 
    } 
}); 

しかし、ログインを追加した「アイテムリンク」のクリック時に呼び出されるすべての機能に（FFのコンソールに）、私の関数 'linksFunction'はまだ最後に呼び出されます。私は何か間違ったことをした？

ありがとうございました。

Answer 1

addEventListenerを captureに設定してください。

はすべてここにそれについての記事を読む：https://developer.mozilla.org/en/DOM/element.addEventListener

更新：

IEのサポートが必要な場合は、 use setCapture。
これはマウスイベントのみをサポートしていますが、私が必要とするすべてのことがわかります。

再び更新：

申し訳ありませんが、私はキャプチャを使用するには、あまりにも速かったが、それはあなたの問題を解決することはできませんので、無用な答えです。

あなたが望むことがわかる唯一の方法は、グローバルなクリック委任を使用することです。そうすれば、すべてのクリックイベントが通過する単一のポイントが得られ、そこでイベントを制御することができます。

この解決方法にはいくつかの欠点がありますが、好きではない場合があります。 1つの明白な1つは、代表団がバブリングフェーズの最後のステップに基づいているため、通常のイベントのバブリングを忘れることができるということです。もう1つは、あなたが慣れ親しんでいたのとはまったく異なる方法でイベントを付けることになります。

これは、あなたがこれで暮らすことができれば、過去数年間私自身が何年も使っていたクリックイベントを処理する素晴らしい方法です。あなたはページ全体（document.body上）に登録された単一のクリックイベントだけを持つことになり、イベントをCSSセレクタにバインド/アンバインドする小さなフレームワークを構築し、必要に応じて手動トリガを行います。

要素の前にclickイベントを登録することができます。要素の前にclickイベントを登録することができます。これは、クライアントサイドテンプレートを使用してオンザフライでサイトを構築する場合に最適です。インスタンス。