如何從擊發容器轉移到孩子時作出反應

停止onDragLeave我目前的結構作出反應如何從擊發容器轉移到孩子時作出反應

var Component = React.createClass({ 
_testOver:function(){ 
    console.log("Do action on hover"); 
}, 
_testOut: function(){ 
    console.log("Do action on out"); 
}, 
render: function(){ 
    return <div style={display:"none"}> 
       <div className="container" 
        onDragEnter={this._testOver} 
        onDragLeave={this._testOut} 
        style={{height:"400px", 
          paddingTop:"100px", 
          backgroundColor:"red"}}> 
        <div className= "child" style={{height:"200px", 
           backgroundColor:"blue"}}> 
         TESTING 
        </div> 
       </div> 
      </div> 
} 
});

當拖着東西在容器，_testOver（）事件將觸發。 Hovever，當繼續拖動到孩子身上時，_testOut（）事件將觸發，同時另一個_testOver（）被觸發。

據我所知，它發生這樣的，因爲技術上鼠標拖出容器並進入孩子（這仍然是在容器內，因此發射另一個_testOver（）事件）

我的問題是：當從父母移動到孩子（或孩子的孩子）時，有辦法阻止事件發生。即_testOver只會在我們將任何東西拖放到容器上時觸發，_testOut只會在我們將其拖出容器時觸發。 _testOut不應該從容器移動到兒童時觸發

謝謝！

來源

2016-02-29 eddeee

找到答案:)。最終，這更多的是一個JavaScript/jQuery的問題，而不是一個反應問題。答案來自HTML5 dragleave fired when hovering a child element。

對於它來與工作，只添加componentDidMount邏輯，所以我們可以在我們的容器上附着的dragenter/DragLeave在它呈現

... 
componentDidMount: function(){ 
    var thisComponent = this; 
    var counter = 0; 

    $(this.refs.container).bind({ 
     dragenter: function(ev) { 
      ev.preventDefault(); // needed for IE 
      counter++; 
      thisComponent._testOver(); 
     }, 

     dragleave: function() { 
      counter--; 
      if (counter === 0) { 
       thisComponent._testOut(); 
      } 
     } 
    }); 
}, 
...

來源

2016-03-02 23:35:08 eddeee

如果沒有jquery，那將會非常好。 – modernator

我不知道這會工作或沒有butit值得一試：

<div className= "child" onDragEnter={this.preventDrag} onDragLeave = {this.preventDrag} style={{height:"200px", 
          backgroundColor:"blue"}}> 

preventDrag:function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 
}

或許你很可能找到一個工作，圍繞國家？就像將布爾值切換爲真或假，你是否將鼠標懸停在子節點上，然後在console.log之前測試這個布爾值？

來源

2016-02-29 14:02:45

我已經找到了答案:)。請檢查一下。謝謝！ – eddeee

如何從擊發容器轉移到孩子時作出反應

回答

相關問題