单击 div 的侦听器但不是链接答案

【问题标题】：click listerner for div but not link单击 div 的侦听器但不是链接
【发布时间】：2013-03-18 06:41:03
【问题描述】：

我在 div 上有一个点击监听器，在 div 内我有一个带有普通 -tag 的链接，但每当我点击该链接时，事件也会运行。如果单击 div 内的链接，如何防止单击侦听器中的内容运行？

HTML：

<div class="container item-container" data="skarp-version-av-os-x-10.8.3-slappt">
        <div class="item">
            <div class="number">
                <p class="number-data">1</p>
            </div>
            <div class="upvotes btn tooltip-points" points="4" id="90" data-toggle="tooltip" title="" data-original-title="Visar poäng satta de senaste 24 h">
                4 poäng
            </div>
            <div class="item-content">
                <a href="http://feeds.idg.se/~r/idg/ETkj/~3/XSuYKgEiumE/skarp-version-av-os-x-1083-slappt" target="_blank" class="item-link fill-div">Skarp version av OS X 10.8.3 släppt</a>
                <span class="item-source">(feeds.idg.se)</span>
                <p class="item-author">Upplagd av Anonym - <em>2013-03-17 21:07:08</em></p>
            </div>
            <div class="comment">
                <i class="icon-comment"></i> <a href="http://www.tldr.nu/item/view/skarp-version-av-os-x-10.8.3-slappt#disqus_thread">0 Comments and 0 Reactions</a>
            </div>
        </div>
    </div>

Javascript：

$('.item-container').click(function(event) {
    var url = $(this).attr('data') ? $(this).attr('data') : '';
    if(url != '')
        window.location = getBaseURL() + 'item/view/' + url;
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以在链接上添加一个事件处理程序以阻止单击事件冒泡到 div，或者您可以在 div 的处理程序中添加一个 if 语句，以便在事件目标为时忽略单击事件链接。我认为前一种解决方案是可行的方法。

这会在链接上设置一个事件处理程序，阻止点击事件传播到 div：

$('.item-container a').click(function(event) {
   event.stopPropagation();
});

jsfiddle demo

【讨论】：

这对我来说是最容易实现的代码，并且可以立即运行，谢谢！

【解决方案2】：

您要么需要将特定的预防方法绑定到内部元素，就像这样 -

$("a").click(function(e){
    e.stopPropagation();
});

或者你需要嗅探被点击元素的类型 -

$(".wrap").click(function(e){
    if ($(e.target).hasClass("wrap")){
       alert("click");
    }
});

第二种方法通常更可取，因为要出现这个问题，你的内在元素有它们自己的事件，你希望它们能够正常运行。

但是，也许您希望链接在单击时不触发父 div 效果，在这种情况下，第一个效果更好。

小提琴 - http://jsfiddle.net/WXzjP/

【讨论】：

return false 的行为不像 event.preventDefault() 和 event.stopPropagation() 被调用了吗？
是的，只是懒惰的写作。固定。
我很好奇，为什么你说布拉德的回答在这种情况下没有帮助？他不是刚刚展示了你展示的第二种技巧吗？
一开始他只是显示return false。我也会把它编辑掉。
无论如何，这些答案都不重要，因为人们应该真正了解事件冒泡 - stackoverflow.com/questions/1357118/…

【解决方案3】：

$('.item-container').click(function(event) {
    if(!$(event.target).is('a')) {
        var url = $(this).attr('data') ? $(this).attr('data') : '';
        if(url != '')
            window.location = getBaseURL() + 'item/view/' + url;
    }
});

检查启动事件的事件目标是否是锚元素，如果不是，则执行您的函数。

【讨论】：

【解决方案4】：

熟悉Event Bubbling - 您需要了解基础知识才能最终了解Event Delegation。

您可以通过以下两种方式之一解决您的问题。将点击事件绑定到<div> 中的<a> 并调用event.stopPropagation();，或者让<div> 的事件处理程序检查event.target 是否是<a> 元素：

if (event.target.nodeName.toLowerCase() === 'a') {
  // <a> was clicked
}

【讨论】：

【解决方案5】：

因为它会“冒泡”。这样想；

当您点击您的链接时，它会按照您指定的方式执行一项操作：导航到一个 url.. 接下来，它“冒泡”树，并且您还有一个 div 的点击处理程序，因此它也尝试运行它。

如果您的$('body') 也有一个点击处理程序，也会被调用。

你必须停止冒泡event.stopPropagation();

例如

$('#your-anchor-tag').click(function(e) {
 e.stopPropagation();
}

这样，您将停止冒泡过程..

【讨论】：