如何处理上点击 但不上孩子的元素？(How to handle a click on a 2019-09-16 10:37发布 站内文章 / 前端开发 26 0 0

我处理与下面的代码的点击。

表输入

<table>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
    </tr>
</table>​

点击处理程序

$('table tr').click(function(){
    alert('clicked');
});​

http://jsfiddle.net/n96eW/

它的工作很好，但如果我在TD复选框，单击时的操控它。

有没有一种方法来处理TR的点击，但在子元素中不触发？

Answer 1:

http://jsfiddle.net/n96eW/1/

在你的复选框添加另一个事件处理程序stopPropagation：

$('table tr').click(function(){
    alert('clicked');
});

$('table tr input').click(function(e) {
    e.stopPropagation();
});
​

Answer 2:

您可以检查event.target来过滤事件：

$('table tr').click(function(e){
    if(e.target.tagName.toLowerCase() != "input") {
        alert('clicked');
    }
});​

Answer 3:

你也可以使用

$("tr").on('click',function() {

  if (!$(event.target).is('input'))
    alert('clicked');

});

文章来源: How to handle a click on a but not on the child elements?