jQuery Table Row單擊事件也觸發當我點擊一個鏈接

Question

這是我迄今爲止，獲得行號工作很好，但我需要使它，以便當我點擊表中的鏈接，它doesnt激發函數內部的代碼。

<table> 
    <tr class="row"> 
    <td>A</td> 
    <td><a class="link" href="foo.html">Foo</a></td> 
    </tr> 
    <tr class="row"> 
    <td>B</td> 
    <td><a class="link" href="Bar.html">Bar</a></td> 
    </tr> 
</table> 


<script> 
$(function(){ 
    $('.row:not(.link)').click(function(){ 
     var $row = $(this).index(); 
    }); 
}); 
</script> 

Answer 1

的選擇.row：沒有（。鏈路）將選擇有一個類「行」和不具備類「鏈接」，這是不是你所期待的所有元素。

您需要在a.link元素的click事件中使用event.stopPropagation，以便click事件不會傳播給包含行的父項。

試試這個：

<table> 
    <tr class="row"> 
     <td>A</td> 
     <td><a class="link" href="foo.html">Foo</a></td> 
    </tr> 
    <tr class="row"> 
     <td>B</td> 
     <td><a class="link" href="Bar.html">Bar</a></td> 
    </tr> 
</table> 

<script> 
    $(function(){  
     $('.row').click(function(){   
      var $row = $(this).index();  
     }); 
     $('.row .link').click(function(e){ 
      e.stopPropagation(); 
     }); 
    }); 
</script> 

Answer 2

您需要防止event propagation中的鏈接的單擊事件 - 這裏有一個例子：http://jsfiddle.net/6t8u7/1/

正如你可以看到，點擊鏈接只是觸發一個事件。點擊行可觸發其他事件。

您得到當前行爲的原因是，鏈接中的單擊事件「冒泡」到父元素。

Answer 3

繼承人jQuery中速戰速決，只要使用的instanceof

$("#news-table tr").click(function(e){ 
     if((e.srcElement instanceof HTMLAnchorElement)!=true )console.log("IIIIIIHA HA!"); 
    }); 

Answer 4

只是有點晚了，但是這是在谷歌我在尋找開放的解決方案相對話題第一個鏈接。因此，它可能有人成材：

$(".clickableRow").click(function(e) { 
 
    if (e.target.nodeName != "A") { 
 
    window.document.location = $(this).attr("href"); 
 
    } 
 
});

鏈接成一排，我的意思是非標準，將照常上班，和這個例子中的標記將有三個獨立的鏈路激活：

<tr class="clickablerow" href="profile.html"> 
 

 
    <td>John Doe, the VP</td> 
 
    <td><a href="print.html" target="_blank">Print</a><a href="chat.html" target="_blank">Chat</a></td> 
 
    
 
</tr>

Answer 5

與數據屬性，沒有必要爲CL屁股：

$(document).on('click', '[data-href]', function(e) { 
    if($(e.target).hasClass('ignore')) 
     return; 
    var ignore = ['input', 'a', 'button', 'textarea', 'label']; 
    var clicked = e.target.nodeName.toLowerCase(); 
    if($.inArray(clicked, ignore) > -1) 
     return; 
    window.location = $(this).data('href'); 
}); 

使用實例（tr僅僅是一個例子 - 您可以使用div等）：

<tr data-href="your_url"> 
    <td class="ignore">Go nowhere</td> 
    <td>Go to your_url</td> 
    <td><a href="another_url">Go to another_url</a></td> 
    <td><input type="text" value="Go nowhere"></td> 
</tr> 

Answer 6

您還可以使用此而不在第二個功能明確選擇行。

$(function(){  
    $('.row').click(function(){   
     var $row = $(this).index();  
    }); 
    $('.link').click(function(event){ 
     event.preventDefault(); 
     event.stopPropagation(); 
    }); 
}); 

Answer 7

只需將if (e.target.tagName == 'A') return;添加到行點擊並且Link元素將使用自己的邏輯。

這裏有更詳細的例子：

$("#table tr").click(function(e) { 

    // Skip if clicked on <a> element 
    if (e.target.tagName == 'A') return; 

    // Logic for tr click ... 

});