时间戳

首页 > 解决方案 > 处理事件处理程序的最合乎逻辑的方式，当只有一次调用有效时，该处理程序被调用两次。

javascript - 处理事件处理程序的最合乎逻辑的方式，当只有一次调用有效时，该处理程序被调用两次。

问题描述

使用 prime-react 的数据表。其中有一个事件处理程序“OnRowSelect”。此事件有一个参数，说明如何从行本身或表格左侧的复选框中选择行。

但是，当使用复选框时，会导致事件触发两次。
首先是“复选框”，然后是“行”。

我对每种选择类型都有单独的方法，如果首先调用“复选框”，则需要取消“行”调用的副作用，以便仅获得“复选框”事件的副作用。

以前在这种情况下，我有一个超时方法，它设置了一个“标志”，下一次调用会寻找它，如果该标志被提出，它就不会运行。但是由于竞争条件，如果在“复选框”事件之前调用“行”，它将运行并且复选框将运行。

这行得通，但我想知道是否有更合适的方法？

请注意，我不是在寻找某种谴责，因为论点不同，并且两个调用之间可能存在一些竞争条件。

标签： javascriptasynchronouseventsdom-events

解决方案

可能您可以pointer-event:none;在复选框上使用 css 并通过代码控制复选框。单击复选框时，不会触发复选框单击事件。只有 tr 点击事件。

注意浏览器兼容性，它不支持IE10。W3School 文档

function onRowSelectHandle(){
  document.querySelector("#myCheckBox").checked = !document.querySelector("#myCheckBox").checked;
  console.log("row selected");
}
<!DOCTYPE html>
<html>
<head>
<style> 
table {
  background : yellow;
  width:300px;
}
input {
  width:40px;
  height:40px;
}

#myCheckBox {
  pointer-events: none;
}

</style>
</head>
<body>
<h1>The pointer-events Property</h1>

<table>
  <tr onclick="onRowSelectHandle()">
    <td><input id="myCheckBox" onclick="onRowSelectHandle()" type="checkbox"/></td>
  </tr>
</table>


</body>
</html>

推荐阅读