javascript - react 在未监听组件上触发的鼠标事件

Question

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

在下面的 bin 中，将鼠标悬停在两个 div 周围最终将导致内部 div 突出显示为红色，即使它没有用于附加 ui-hover 类的事件触发器(尽管其父级有)。

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
  });
}