javascript - 单击 div 的监听器但不是链接

Question

我在 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;
});

Answer 1

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

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

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

jsfiddle demo