在鼠標移動過程中如何防止點擊

Question

我有旋轉的圓形菜單。簡單點擊後，我想點擊點擊事件，但在旋轉過程中 - mousemove我想忽略點擊。現在我有 -

<g id="bottomMenuRotate" onMouseDown={this.selectElement.bind(this)}> 

然後我選擇功能看起來 -

selectElement(e){ 
    let groupRotate = document.getElementById('bottomMenuRotate'); 
    groupRotate.onmousemove = function(e) {....} 
    groupRotate.onmouseup = function(e){ 
      groupRotate.onmousemove = null; 
    } 
} 

因此，如何我無法阻止點擊？我想是這樣

groupRotate.onmouseup = function(e){ 
      e.stopPropagation(); 
      groupRotate.onmousemove = null; 

     }; 

或

groupRotate.onmouseclick = function(e){ 
    e.stopPropagation(); 
} 

但這樣可以防止每一次點擊。任何提示如何我可以做到這一點？

groupRotate.onmousemove = (e) => { 
    this.setState({ mouseMoving: true }); 
} 
groupRotate.onmouseup = (e) => { 
    this.setState({ mouseMoving: false }); 
} 

別的地方：

Answer 1

所以，我終於找到了解決方案簡單

selectElement(e){ 
      let move = false; 
      groupRotate.onmousemove = function(e) { 
       move = true;  
      } 
      groupRotate.onclick = function(e){ 
       move ? e.preventDefault() : false; 
      } 
    } 

這防止只有當移動設置爲true點擊。

Answer 2

在onMouseMove處理程序，防止運行單擊事件設置的狀態

groupRotate.onmouseclick = (e) => { 
    if (!this.state.mouseMoving) { 
    ... 
    }; 
} 

注意箭頭的功能，使功能中可用this。