Tôi có thể loại trừ một nút bấm bên trong một sự kiện nhấp TR không?

Question

Tôi hiện đang tô sáng hàng của bảng khi được chọn nhưng trong một trong các ô tôi có nút. Khi tôi nhấp vào nút tôi đang kích hoạt sự kiện nhấp vào hàng của bảng. Có thể tách riêng hai cái không?

hai cuộc gọi của tôi hiện trông như thế này:

$('table.table-striped tbody tr').on('click', function() { 
    $(this).find('td').toggleClass('row_highlight_css'); 
}); 


$(".email-user").click(function(e) { 
    e.preventDefault(); 
    alert("Button Clicked"); 
}); 

HTML của tôi trông như thế này:

<table class="table table-bordered table-condensed table-striped"> 
    <thead> 
    <tr> 
     <th>col-1</th> 
     <th>col-2</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Some Data</td> 
     <td><button class="btn btn-mini btn-success email-user" id="email_123" type="button">Email User</button></td> 
    </tr> 
    </tbody> 
</table> 

Bất kỳ ý tưởng làm thế nào tôi có thể ngăn chặn sự kiện nhấn nút từ kích hoạt các sự kiện liên tiếp nhấp chuột?

Answer 1

Bạn phải sử dụng stopPropagation:

$(".email-user").click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    alert("Button Clicked"); 
}); 

(Xem thêm: What's the difference between event.stopPropagation and event.preventDefault?)

Answer 2

Tôi tin rằng điều này là do sự kiện bọt, hãy thử sử dụng e.stopPropagation(); ngay sau e.preventDefault();

Answer 3

Hãy thử điều này:

$('.table-striped').find('tr').on('click', function() { 
    $(this).find('td').toggleClass('row_highlight_css'); 
}); 

$(".email-user").on('click', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
});​