Question

我有以下div：

<div class='amazingmenu' id='menupull'>
    <img src='images/down.png' width=20 height=20 align='right'/>
    <div id='menupullhideme'>click the arrow to read the rest!<br /></div>
    more jokes on <a href='http://www.amazingjokes.com'>amazingjokes.com</a>
</div>

单击DIV或图像应该在jQuery中执行某些功能：

$('#menupull').click( function() {
          alert( 'pullmenu clicked' );
});

我想这样做只是在我点击DIV或图像时才会提醒信息，而不是链接。试过这个：

     $('#menupull:not(a)').click( function() {...

但这不起作用。有什么想法吗？

Answer 1

问题可能是事件冒泡..你可以做什么，是在你的“点击”事件内检查nodeName / tagName是否是A，如果是，则中止其余部分你的功能，让主播就是这样做的。

我的jQuery有点生疏，因为我自己并没有太多使用它，但我觉得这样的事情......

$('#menupull').click( function(e) {
    var target  = $(e.target);
    if( target.is('a') ) {
        return true; // True, because we don't want to cancel the 'a' click.
    }
});

Answer 2

这种情况正在发生，因为当您单击链接时事件会冒泡到div，因此您要做的是在使用event.stopPropagation()方法单击链接时阻止它冒泡。如您所见，您将事件对象作为参数传递给函数。您仍想在<a>上捕获事件，然后阻止它传播，如下所示：

$('#menupull').click( function() {
    alert( 'pullmenu clicked' );
});
$('#menupull a').click( function(e) {
    e.stopPropagation();
});

修改

你可以解决这个问题的另一种方法是使用一个不同的选择器，它将一个事件监听器附加到该元素的所有子节点，但<a>元素除外，但是不工作当您单击没有子节点的元素区域时。

$('#menupull>*:not(a)').click( function(event) { alert( 'pullmenu clicked' ); });

http://jsfiddle.net/zCsLm/3/

Answer 3

您的问题是$('#menupull:not(a)')选择id menupull A元素不是#menupull元素的元素....好吧，div是target。所以前面的内容并没有真正完成。而是检查点击的A是什么。

最简单的方法是仅在未点击A的情况下执行警报。如果单击$(function() { $('#menupull').click( function(event) { if (event.target.nodeName != 'A') { alert( 'pullmenu clicked' ); } }); });，则一切正常进行（遵循链接等）。您可以使用 event.target.nodeName ：

来实现此目的

{{1}}

选择DIV但不是里面的链接，jQuery问题

3 个答案:

的 jsFiddle example