反应鼠标事件触发组件不听他们

Question

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

在下面的bin中，即使它没有附加ui-hover类的事件触发器（虽然它的父级别），但是围绕两个div的鼠标最终将导致内部div被突出显示为红色。

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

Answer 1

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

（更新答案）

由于@Stan评论，与event.currentTarget更换event.target是简单的解决办法，它会针对其监听器触发的事件，而不是鼠标下的元素的元素。

（原来的答复/其他选项）

您也可以在父DIV设置ref="target"，然后用裁判，而不是事件的目标。

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

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

_mouseEnter: function(event) { 
    this.setState({ 
    hovering: true 
    }); 
}