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和明信片锚点上点击。

目前在所有元素上都标识了一个点击，包括明信片div。

非常感谢任何帮助。

Answer 1

这是由于Javascript的事件传播机制，您可以在以下网址阅读更多内容：

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

Javascript: Multiple mouseout events triggered

您可以通过禁用内部div的click事件来避免这种情况，如下所示：

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

DIV图层和jquery点击功能

4 个答案: