Question

我有一个div，里面有一些文字和一些由某些span标签包围的单词。我想点击那些“跨越”的单词并让div向下滑动，显示一个“底层”div，其中包含与该特定跨越单词相关的文本。当我点击div而不是单词时，我希望div能够向上滑动。因此，我将一些行动绑定到div和这些跨度的类。但是，当我点击一个跨度时，div也会获得点击动作。当我点击跨度时，如何更改选择器不接收div上的单击操作？

以下是代码：

<div class='mainpage'>
    <p class='common'>bla-bla-bla <span class='footnoted' footnote='f1'>foo bar</span></p>
</div>

jQuery代码：

$(document).ready(function(){
    $(".mainpage>.common>.footnoted").click(function(){
        alert('a');
    });

    $(".mainpage").not($(".mainpage>.common>.footnoted")).click(function(){
        alert('b');
    });
});

换句话说，当我点击“foo bar”时，我会收到“a”和“b”警报，而我只想获得“a”。我怎么能这样做？

提前谢谢你。提莫菲。

Answer 1

您需要使用

event.stopPropagation();

像这样的

$('div').click(function(){alert('div clicked');});

$('div span').click(function(event){ 
    alert('span clicked')
    event.stopPropagation();
});

<强> Live Demo

<强> Reference

Answer 2

根据首先触发的事件，您可以尝试将return false;添加到点击事件功能的末尾。这应该可以阻止第二次点击事件触发并解决您的问题。

jQuery，使用正确的选择器

2 个答案: