在鼠标移动过程中如何防止点击

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。