在我的 React 应用程序中,我有一个由节点组成的网格,每个节点都有一个 onMouseUp、onMouseDown 和 onMouseEnter 监听器。我发现当我拖动鼠标并在网格上移动它时,即使我放开鼠标,它也不会触发 onMouseUp 。我的代码如下:
// inside my render function
{this.state.grid.map((row, rowIdx) => {
return (
<div key={rowIdx}>
{row.map((node, nodeIdx) => {
const {
row,
col
} = node;
return (
<Node
key={nodeIdx}
col={col}
onMouseDown={(row,col) => {this.handleMouseDown(row,col)}}
onMouseEnter={(row, col) =>this.handleMouseEnter(row, col)}
onMouseUp={(row, col) =>this.handleMouseUp(row, col)}
row={row}></Node>
);
})}
我的handleMouseUp函数是:
handleMouseUp = (row,col) => {
...
}
在每个节点中,我通过以下方式引用这些回调:
return (
<div
onMouseDown={() => onMouseDown(row, col)}
onMouseEnter={() => onMouseEnter(row, col)}
onMouseUp={() => onMouseUp(row,col)}>
</div>
);
每个节点的 CSS 属性包括(不确定这是否与之有关):
user-drag: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-user-select: none;
有谁知道如何解决这个问题吗?谢谢!!
最佳答案
看来onMouseUp
仅当光标仍在 <div/>
时取消单击时才会触发。
尝试使用onDragEnd
并设置draggable='true'
在 <div/>
看看它是否有效。
编辑:为了简单起见,我建议将逻辑移动到父容器。可以引用这个demo:https://stackblitz.com/edit/grid-painter 。有些值是硬编码的,但主要概念就在那里。
关于javascript - react 事件 : onMouseUp not firing after onMouseEnter event,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60714095/