Làm cách nào để loại trừ một mục con khỏi sự kiện nhấp chuột của cha mẹ?

Question

Tôi đang gặp sự cố trong đó hàng bảng có sự kiện nhấp, nhưng khi người dùng nhấp vào liên kết trong một trong các ô của hàng trong bảng, tôi không muốn sự kiện nhấp của hàng đó kích hoạt.

Hãy tưởng tượng trường hợp ô bảng có liên kết bên trong và thường nhấp vào vùng trống của bất kỳ hàng trong bảng nào (ví dụ: không phải liên kết) sẽ khiến một số hành động như thu hẹp và thu hẹp hàng.

Điều xảy ra là sự kiện nhấp chuột bên dưới đang kích hoạt thì liên kết được theo sau (hành động dự định).

Điều tôi cần xảy ra là loại trừ việc nhấp vào a href trong khi kích hoạt hành động nhấp chuột hàng loạt tr.title (ví dụ: cảnh báo sẽ không kích hoạt và liên kết sẽ được theo sau).

mã jQuery này đang thiết lập sự kiện nhấp chuột cho dòng tiêu đề (ví dụ như tất cả, bất kỳ tế bào của trong dòng đó TH vv)

$(document).ready(function() { 
$(".report tr.title-row").click(function() { 
    alert('I am firing!'); 
}); 

Dưới đây là HTML cùng này áp dụng đối với:

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="report"> 
    <tbody> 
    <tr class="title-row"> 
     <th width="340"><span class="title">Test</span> 
     </th> 
     <th width="130" class="center-cell">Test</th> 
     <th width="90" class="status"></th> 
     <th></th> 
     <th width="160"> <a target="_self" href="http://www.google.com" class="link-class sub-class">I am triggering the TR click event</a> 
     </th> 
    </tr> 
    <tr> 
     <td class="sub-row" colspan="5"> 
     <table width="100%" cellspacing="0" cellpadding="0" border="0"> 
      <tbody> 
      <tr> 
       <td><strong>SubRow</strong> 
       </td> 
       <td width="90" class="status"><span class="sub">Sub</span> 
       </td> 
       <td width="120"></td> 
       <td width="160"><a title="Continue" href="http://www.yahoo.com">Something</a> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

có thể kiểm tra các target của nhấp chuột liên tiếp và chỉ mã chạy nếu mục tiêu không phải là một thẻ <a>:

$(".report tr.title-row").click(function(event) { 

    if(! $(event.target).is('a')){ 
     alert('I only fire when A not clicked!'); 
    } 
}); 

Answer 2

chỉ dừng lại bọt sự kiện để hàng

$(".report tr.title-row").click(function() { 
    alert('I am firing!'); 
}); 

$(".report tr.title-row a").click(function(ev){ 
    // link clicked 
    // so something 

    ev.stopPropagation(); // stop triggering the event to the table row 
}); 

btw ... cho mã tốt hơn chỉ cần sử dụng on thay vì eventhandler tên

$(".report tr.title-row").on('click', function() { 
    alert('I am firing!'); 
}); 

$(".report tr.title-row a").('click', function(ev){ 
    // link clicked 
    // so something 

    ev.stopPropagation(); // stop triggering the event to the table row 
});