React鼠标事件在没有监听它们的组件上触发

React mouse events fired on components not listening for them

本文关键字：组件 监听 事件 鼠标 React      更新时间：2023-09-26

不确定这是我对React事件的深刻误解还是一个实际的错误，但在父母身上注册的鼠标事件有时会在孩子身上触发。

在下面的bin中，在两个div周围拖动鼠标最终会导致内部div变为红色，即使它没有用于附加ui悬停类的事件触发器（尽管它的父级有）。

http://jsbin.com/vemopo/1/edit?css，js，输出

这似乎取决于鼠标移动的速度。我的猜测是，当事件被触发时，event.target会变成鼠标下的任何东西。因此，它在输入父div时会触发，但如果鼠标移动得很快，那么在处理事件处理程序时，它可能已经在子div上悬停了。

（更新答案）

正如@Stan所评论的，用event.currentTarget替换event.target是最简单的修复方法，它将针对侦听器触发事件的元素，而不是鼠标下的元素。

（原始答案/其他选项）

您也可以在父div上设置ref="target"，然后使用ref而不是事件目标。

_mouseEnter: function(event) {
  this.refs.target.getDOMNode().classList.add('ui-hover');
},

然而，最好避免像这样触摸DOM。在这种情况下，您可以在事件处理程序中使用setState，并根据this.state使用条件来给出不同的结果。

_mouseEnter: function(event) {
  this.setState({
    hovering: true
  });
}
相关文章：