單擊listerner for div但不鏈接

Question

我在div上有一個點擊監聽器，在div里面我有一個帶有普通-tag的鏈接，但每當我點擊鏈接時，事件也會運行。 如果單擊div中的鏈接，如何防止click-listener中的內容運行？

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

您可以在鏈接上添加一個事件處理程序來阻止click事件冒泡到div，或者您可以在div的處理程序中添加if語句，以便在事件目標是鏈接時忽略click事件。 我認為以前的解決方案是可行的方法。

這會在鏈接上設置一個事件處理程序，阻止click事件傳播到div：

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

jsfiddle演示

Answer 2

您需要將特定的預防方法綁定到內部元素，如下所示 -

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

或者你需要嗅探點擊元素的類型 -

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

第二種方法通常是可取的，因為出現這個問題，你的內部元素有自己想要正常運作的事件。

但是，也許您希望鏈接在單擊時不觸發父div效果，在這種情況下，第一個更好。

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

Answer 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;
    }
});

檢查發起事件的事件目標是否為錨元素，如果不是，則執行您的函數。

Answer 4

熟悉事件冒泡 - 您需要了解最終了解事件委派的基礎知識。

您可以通過以下兩種方式之一解決問題。 將click事件綁定到<div>的<a>並調用event.stopPropagation(); ，或讓<div>的事件處理程序檢查event.target是否為<a>元素：

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

Answer 5

因為它“冒泡”。 想想這樣;

當你點擊你的鏈接時，它有一個你指定的動作：導航到一個URL ..接下來，它“冒泡”樹，你也有一個div的點擊處理程序，所以它試圖運行太。

如果你還有一個你的$('body')的點擊處理程序也會被調用。

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

例如

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

這樣，你將停止冒泡過程..