DIV слои и функция щелчка jquery

Question

У меня есть функция открытки, которая в основном анимирует div наложения, а затем помещает открытку над ним.HTML-код выглядит примерно так:

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

Мой jquery выглядит следующим образом:

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

Я хочу, чтобы мои обработчики событий обрабатывали клики по оверлею Div и только привязке открытки.

В настоящее время щелчок идентифицирован по всем элементам, включая раздел открытки.

Любая помощь будет принята с благодарностью.

Answer 1

Это связано с механизмом распространения событий Javascript, вы можете прочитать больше на:

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

Javascript: сработало несколько событий mouseout

Вы можете избежать этого, отключив событие click во внутреннем div, например:

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

Answer 2

тебе придется прекратить пузыриться.

По одному из этих примеров:

$('#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
});

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):

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

или присвоить самой ссылке идентификатор:

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

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