javascript - Javascript：単一のアクションから発生する複数のイベント

Question

ページ内の領域にonclickイベントがアタッチされており、ユーザーがその領域をクリックすると特定のアクションが発生します（当然）。最近、その地域に画像を追加しました。ユーザーがその画像をクリックしたときに、別のアクションを発生させたいのですが、リージョン全体に関連付けられたアクションを発生させたくありません。ただし、実際には、画像をクリックすると両方のイベントが発生します。画像がクリックされたときにリージョン全体のアクションを抑制するにはどうすればよいですか？

Answer 1

あなたが遭遇している問題は、イベントバブリングとして知られています。画像のクリックイベントは、そのノードのすべての親要素にバブルアップします。バブリングをキャンセルしたい。

すべてのブラウザで機能するこれを行うための最良の方法は、JavaScriptフレームワークを使用することです。jQueryには、これを行うための非常に簡単な方法があります。他のフレームワークには、バブリングをキャンセルするための同様のメカニズムがあります。私はたまたまjQueryに最も精通しています。

たとえば、jQueryで次のようなことを行うことができます。

$('img').click(function () {
    // Do some stuff

    return false;// <- Cancels bubbling to parent elements.
});

Answer 2

ダリットは正しいです、あなたはイベントが泡立つ（伝播する）のを止める必要があります：

function imgEventHandler(e) {
    // ^notice: pass 'e' (W3C event)

    // W3C:
    e.stopPropagation();

    // IE:
    if (window.event) {
        window.event.cancelBubble = true;
    }

}

Answer 3

画像のイベントハンドラーで

event.cancelBubble = true;

そして最後に

return false;