demo

Question

我有这样的结构

<table><tr><td></td><td><input type="button" name="button"></td></tr></table>
<script> 
$('tr').click(function(){window.alert('tr');})
$(':input').click(function(){window.alert('input');})
</script>

当我点击按钮时，tr click事件也被调用。有没有办法禁用父元素上的click事件？我找到的唯一解决方案是将类添加到父元素，并在其单击函数内检查它。例如：

 <script> 
$('tr').click(function(){ if(!$(this).hasClass('disable')) { window.alert('tr');  }  $(this).removeClass('disable');  })
$(':input').click(function(){window.alert('input'); $(this).closest('tr').addClass('disable');})
</script>

Answer 1

使用.stopPropagation()

$('tr').click(function(){
   window.alert('tr');
});
$(':input').click(function(e){
   e.stopPropagation();
   window.alert('input');
});

demo

Answer 2

.stopPropagation（）会起作用但如果您不想停止整个事件，那么只要目标匹配就可以触发它。

See this thread。

Answer 3

停止传播？

http://api.jquery.com/event.stopPropagation/

这将阻止点击事件冒泡其父母。

Answer 4

您还可以使用event.stopimmediatepropagation()和event.isImmediatePropagationStopped()

检查传播状态

$(':input').click(function(e){
    e.stopImmediatePropagation();
    var status = e.isImmediatePropagationStopped();

    //CHECK
    console.log(status); //true-false
});

jquery - 禁用父元素上的click函数

4 个答案:

demo