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

【问题标题】：Most logical way to handle a event handler which is called twice when only one call is valid.处理事件处理程序的最合乎逻辑的方式，当只有一次调用有效时，该处理程序被调用两次。
【发布时间】：2019-01-03 09:44:41
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

在复选框点击事件中，执行event.stopPropagation。问题是，当您单击复选框时，由于复选框在行内，因此事件会冒泡。你必须停止这种行为。使用超时和标志更多的是修补工作
是的，这是正确的答案。应该首先想到这一点，不确定是否存在这样的解决方案，因为事件是由另一个库而不是 vanilla web-events 创建的。
即使您的事件是通过库触发的，您也会向它传递一个回调。所以你必须在那里处理。如果没有，您可以在行上添加处理程序并检查目标元素

标签： javascript asynchronous events dom-events

【解决方案1】：

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

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

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>

【讨论】：