对未侦听它们的组件触发的React鼠标事件

Question

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

在下面的bin中，围绕两个div进行鼠标调整最终会导致内部div突出显示为红色，即使它没有用于附加ui-hover类的事件触发器（尽管它的父节点也是如此）。 p>

http://jsbin.com/vemopo/1/edit?css,js,output

Answer 1

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

（更新的答案）

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

（原始答案/其他选项）

您还可以在父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
  });
}