反應鼠標事件觸發組件不聽他們

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