Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/432.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 防止在单击行内的按钮时触发表行onclick事件_Javascript_Html_Dom - Fatal编程技术网

Javascript 防止在单击行内的按钮时触发表行onclick事件

Javascript 防止在单击行内的按钮时触发表行onclick事件,javascript,html,dom,Javascript,Html,Dom,我有一个带有ONCLICK事件的表行(在下面切换其他数据)。在其中一个行单元格中,我有一个按钮(单击该按钮时执行AJAX操作)。 当我单击按钮时,行的onclick事件也会触发,发生的情况是,在AJAX调用完成之前会出现额外的数据(这对我来说是一个坏行为)。 有什么办法可以优雅地解决这个问题吗?(无需识别并将其编码到行的onclick代码中) 谢谢添加一个事件。stopPropagation()到您的按钮单击处理程序。有关更多信息,请查看。如果您不喜欢javascript解决方案,在许多情况下也

我有一个带有ONCLICK事件的表行(在下面切换其他数据)。在其中一个行单元格中,我有一个按钮(单击该按钮时执行AJAX操作)。 当我单击按钮时,行的onclick事件也会触发,发生的情况是,在AJAX调用完成之前会出现额外的数据(这对我来说是一个坏行为)。 有什么办法可以优雅地解决这个问题吗?(无需识别并将其编码到行的onclick代码中)
谢谢

添加一个
事件。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() <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>