0

別の画像の上に絶対位置の画像があります。
クリック イベントを背景の画像にバインドし、オーバーレイ画像をクリックすると、クリック イベントが期待どおりに背景画像にバブルアップしません。
その間、基になる div までさらにバブルします。 

<div class="container">
    <img src="http://dummyimage.com/600x400/000/fff&text=Background" id="bg" />
    <img src="http://dummyimage.com/100x100/ff00ff/000000&text=Overlay" id="overlay" />
</div>  



$(function(){
    $("#bg").on("click", function(){
          alert("Click on background"); 
    });   
    $("#overlay").on("click", function(){
          alert("Click on overlay - should bubble to background and container"); 
    });      
    $(".container").on("click", function(){
        alert("Click on either overlay or background which bubbled through to the container");
    });
});

jsfiddle はこちら: http://jsfiddle.net/V9dkD/2/

なぜこれが起こるのか本当にわかりません。
HTML構造を変更せずに、トップ画像のクリックを背景画像までバブルアップするにはどうすればよいですか?

4

2 に答える 2

1

他の画像をクリックする必要があります。マウス イベントに関して言えば、重要なのは構造であり、位置ではありません。

$(function(){
    $("#bg").on("click", function(){
          alert("Click on background"); 
    });   
    $("#overlay").on("click", function(){
          alert("Click on overlay - should bubble to background and container");
          $("#bg").trigger('click');
    });      
    $(".container").on("click", function(){
        alert("Click on either overlay or background which bubbled through to the container");
    });
});

これはフォークされたフィドルです。これにより、.containerクリック イベント ハンドラーが 2 回トリガーされることに注意してください。ハンドラーreturn falseでこれを防ぐことができます。bg実際のユースケースに応じて、いくつかの調整を行う必要があります。

于 2013-05-24T15:48:52.480 に答える
0

本当に変更する必要があるのは #overlay のイベント ハンドラだけです

$("#overlay").on("click", function(){  
    alert("Click on overlay - should bubble to background and container"); 
    $('#bg').trigger('click')
});

js のイベントには 2 つのサイクルがあります。キャプチャとバブリングです。これは、ルートから子孫を経由して要素に戻り、元に戻ります。ページ上の配置を使用してイベントが伝播されることはなく、DOM 構造のみが重要です。

于 2013-05-24T15:49:02.093 に答える