Javascript 防止在单击行内的按钮时触发表行onclick事件
我有一个带有ONCLICK事件的表行(在下面切换其他数据)。在其中一个行单元格中,我有一个按钮(单击该按钮时执行AJAX操作)。 当我单击按钮时,行的onclick事件也会触发,发生的情况是,在AJAX调用完成之前会出现额外的数据(这对我来说是一个坏行为)。 有什么办法可以优雅地解决这个问题吗?(无需识别并将其编码到行的onclick代码中)Javascript 防止在单击行内的按钮时触发表行onclick事件,javascript,html,dom,Javascript,Html,Dom,我有一个带有ONCLICK事件的表行(在下面切换其他数据)。在其中一个行单元格中,我有一个按钮(单击该按钮时执行AJAX操作)。 当我单击按钮时,行的onclick事件也会触发,发生的情况是,在AJAX调用完成之前会出现额外的数据(这对我来说是一个坏行为)。 有什么办法可以优雅地解决这个问题吗?(无需识别并将其编码到行的onclick代码中) 谢谢添加一个事件。stopPropagation()到您的按钮单击处理程序。有关更多信息,请查看。如果您不喜欢javascript解决方案,在许多情况下也
谢谢添加一个
事件。stopPropagation()代码>到您的按钮单击处理程序。有关更多信息,请查看。如果您不喜欢javascript解决方案,在许多情况下也可以使用CSS解决方案:
style="pointer-events: none;"
这将抑制
onclick事件
然而,在某些情况下,我仍然有一些问题,而这些问题似乎不起作用。
在大多数情况下,我只使用上面的样式。如果使用jQuery,您可以这样做:
tbody.on('click','tr',函数(e){
设target=$(即target);
if(target.is('i')| | target.is('button')| | target.is('a')| | target.hasClass('select-checkbox')){
返回;
}
//你的东西在这里
});
卡号
卡号
地位
行动
3.
12345
活跃的
指导我找到确切的解决方案。谢谢懒惰者的直接链接它像一个符咒一样禁止触发表行事件处理程序,但仍然允许单击表数据中的链接!!-非常感谢,曾为TypeScript
工作:event.stopPropagation()这是我需要的答案,因为我调用的onclick方法调用了其他方法和event.stopPropagation();也阻止了他们被叫来!
<table>
<thead>
<tr>
<th>Card_ID</th>
<th>Card_Number</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr style="pointer-events: none;">
<td>3</td>
<td>12345</td>
<td>Active</td>
<td><button style="pointer-events: auto;" type="button" id="Inactive" class="btn btn-sm"></button></td>
</tr>
</tbody>
</table>