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

但这会阻止每次点击。我有什么技巧可以做到吗？

Answer 1

在onMouseMove处理程序中设置一个阻止点击事件运行的状态：

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

其他地方：

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

注意箭头的功能是在函数中使this可用。

Answer 2

所以我终于找到了简单的解决方案

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

仅在move设置为true时阻止单击。

如何在mousemove期间阻止点击

2 个答案: