1

これが良い質問かどうかはわかりませんが、これに関する意見を聞きたいです。

2 種類のイベントがあるとします。

A: a mouse click
B: mouse is currently inside a box

また、2 種類のイベント ハンドラー関数があるとします。

f: console.log("mouse is clicked")
g: console.log("mouse is clicked inside the box")

ここで、コードで実行したいのは、ボックス内以外の場所でマウスをクリックすると、「マウスがクリックされました」というメッセージが表示されることです。ただし、ボックス内でマウスをクリックすると、「ボックス内でマウスがクリックされました」というメッセージが表示されます。

私の現在の実装方法は次のようになります。

if (A) then {f()}
if (A and B) then {g()}

つまり、f を A のリスナーとして登録し、A と B の両方が成立したときに発火する新しいイベントを作成し、そのイベントのリスナーとして g ans を登録しました。

もちろん、ボックス内でマウスをクリックすると、「マウスがボックス内でクリックされました」「マウスがクリックされました」という 2 つのメッセージが表示されます。

私が探している単一の「マウスがボックス内でクリックされた」というよりも。

何が起こっているのかを定義する正式な方法はありますか?また、それに対処する最善の方法は何ですか? つまり、g が呼び出されたときに f の呼び出しが抑制されるように、イベント ハンドラー g がハンドラー f よりも優先されるようにする必要があります。

4

2 に答える 2

2

読む必要があるのは、jQuery でのイベントのバブリングと伝播です。

jQuery イベント ハンドラー コールバックには、イベント オブジェクトがパラメーターとして渡されます。これには、イベントの伝播を停止するために呼び出すことができるメソッド、または任意の親ハンドラーへの「バブリング」が含まれます。

あなたの例では、これは、「マウスがクリックされた」というイベントをウィンドウ/ドキュメント全体にバインドし、「ボックス内でマウスがクリックされた」というボックスのみにイベントをバインドできることを意味しますが、このイベントが親ハンドラー。

$(body).click(function() {
    console.log("mouse is clicked");   
});

$("#box").click(function(e) {
    e.stopPropagation();
    console.log("mouse is clicked inside the box");
});

親ハンドラー (イベント バブリング)

より具体的には、ハンドラー自体には親子関係がなく、DOM 要素に直接バインドされているだけです。親子関係を持つのは、DOM 要素そのものです。

この例で#boxは、 は要素の子ですbody(ただし、間に他の要素がある可能性があります)。でクリックがトリガーされる#boxと、ハンドラーは要素をチェックし、次に要素の親をチェックし、次に要素の親の親をチェックします... DOM ツリーのずっと上に。これは、イベントのバブリングが停止するか、ツリーの最上部に到達するまで続きます。

このようにして、ボックス内に別の要素を追加し、別のハンドラーを追加して同じことを行うことができます。つまり#button、イベントの伝播を停止すると、#boxまたはbodyメッセージは表示されません。

于 2013-02-17T22:46:47.980 に答える
1

これは、1 つのイベント リスナーで実現できます。

window.addEventListener('click', function (e) {
    if (document.getElementById('box').contains(e.target)) {
        alert('Box clicked!');
    } else {
        alert('Not box clicked!');
    }
}, false);

または jQuery:

$(window).click(function (e) {
    if ($('#box')[0].contains(e.target)) {
        alert('Box clicked!');
    } else {
        alert('Not box clicked!');
    }
});
于 2013-02-17T19:52:15.963 に答える