I have circle menu with rotation. And after simple click i want to fire click event, but during rotation - mousemove i want ignore click. For now i have -

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

Then my select function looks -

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

So how i cant prevent click? I tried something like

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

        };

or

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

but this prevents every click. Any tips how i can do it?

I have circle menu with rotation. And after simple click i want to fire click event, but during rotation - mousemove i want ignore click. For now i have -

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

Then my select function looks -

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

So how i cant prevent click? I tried something like

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

        };

or

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

but this prevents every click. Any tips how i can do it?

• javascript
• events
• reactjs

• Can u show example? When it will work, i will mark it as correct – Lukáš Unzeitig Commented Sep 22, 2016 at 9:02

2 Answers 2

Set a state in your onMouseMove handler that prevents the click events from running:

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

Somewhere else:

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

Note the arrow functions to make this available within the functions.

So i finally found simply solution

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

This prevent click only when move is set to true.