Question

使用原始反应的数据表。其中具有事件处理程序“ OnRowSelect”。此事件具有一个参数，该参数说明如何从行本身或表左侧的复选框中选择行。

但是使用此复选框时，事件将触发两次。
首先使用“复选框”，然后使用“行”。

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

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

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

请注意，我并不是要寻求某种谴责，因为参数是不同的，并且两次调用之间可能存在某些竞争条件。

Answer 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>

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

1 个答案: