DIVレイヤーとjqueryクリック機能

Question

私は基本的にオーバーレイのdivをアニメーション化し、その上にハガキを配置するはがき機能を持っています。 HTMLは、の線に沿って何かである：

$('#overlay, .postcard a').click(function(){ doSomething() }) 

私は、オーバーレイdiv要素のみはがきアンカーのピックアップクリックに私のイベントハンドラをしたい：

<div id="overlay"> 
    <div class="postcard"> 
     <p>This is a postcard</p> 
     <a href="#">close</a> 
    </div> 
</div> 

私のjqueryのは、このようになります。

現在のところ、クリックは、はがきdivを含むすべての要素で識別されます。

ご協力いただければ幸いです。

Answer 1

これが原因でありますJavascriptのイベント伝播メカニズムについては、

http://www.quirksmode.org/js/events_order.html

Javascript: Multiple mouseout events triggered

あなたはこのように、内部のdivのクリックイベントを無効にすることでこれを避けることができます。

$('.postcard').click(function(evt) { evt.stopPropagation(); }); 

Answer 2

オーバーレイにクリックハンドラを追加すると、その中のすべてがクリックされた場合にハンドラが起動されます。のみに

あなたは（#overlayの後にコンマなし）このように、セレクタを使用することができ、リンクのクリック可能します

$('#overlay .postcard a').click(function(){ doSomething() }) 

またはリンク自体にIDを与える：

<div id="overlay"> 
    <div class="postcard"> 
     <p>This is a postcard</p> 
     <a id="clickMe" href="#">close</a> 
    </div> 
</div> 

$('#clickMe').click(function(){ doSomething() }) 

Answer 3

要素またはその子孫をクリックすると、クリックイベントが発行されます。

あなたが正確な要素を与えるイベントのターゲットを使用することができますをクリック：

var selector = '#overlay, .postcard a'; 
$(selector).click(function(e){ 
    var target = $(e.target); 
    if (target.is(selector)) doSomething() 
}) 

EDIT²：この新しいバージョンは二回発動べきではない：（http://jsfiddle.net/xnu8M/）

を

$('.postcard a').click(function(e){ 
    var target = $(e.target); 
    if (target.is('.postcard a')) alert('a'); 
}); 

$('#overlay').click(function(e){ 
    var target = $(e.target); 
    if (target.is('#overlay')) alert('a'); 
}); 

Answer 4

あなたはバブリングを破る必要があります。これらの例のいずれかによって

：

$('#overlay, .postcard a').click(function() { 
    // call other method 
    return false; 
}); 

$('#overlay, .postcard a').click(function (e) { 
    e.preventDefault(); 
    // call other method 
}); 


$('#overlay, .postcard a').click(function (e) { 
    e.stopPropagation(); 
    // call other method 
});