CODEWITHSUNDEEP
javascriptreactjssvgmouseeventonmousedown
Ajinkya Dhote
Ajinkya Dhote

Reputation: 1478

React OnMouseDown event is not working whereas OnMouseUp is working fine.(on SVG elements)

I am having an svg element on which I need to capture the mousedown event. Here is the code.

//code snippet...
<g onMouseDown={this.clickHandler}>
    <circle ...></circle>
    <text> </text>
</g>

Code for click handler is as simple as this.

clickHandler() {
    alert("mouse down")
 }

onMouseUp and OnClick are working fine, but not the onMouseDown

The same onMouseDown event in working fine outside the SVG (I tried on Button)

Any Idea about the error.

React Version: 16.5.2

Upvotes: 5

Views: 17483

Answers (2)

Satheesh
Satheesh

Reputation: 171

class Hello extends React.Component {
  onDown() {
    console.log("Down");
  }
  onClick() {
    console.log("Click");
  }

  render() {
    return (
      <div>
        <svg >
          <g onClick={this.onClick} onMouseDown={this.onDown} >
            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          </g>
        </svg>
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Working fine with console.log link

Upvotes: 3

Ajinkya Dhote
Ajinkya Dhote

Reputation: 1478

OnMouseDown will get a block if you are also having the drag functionality implemented.

To capture the OnMouseDown you need to remove event.stopPropogation() from your dragStartEvent

Another Interesting thing is if you don't want to remove event.stopPropogation() you can still perform the all the operation which you intend to perform on OnMouseDown in dragStartEvent event.

Hope this helps...

Upvotes: 6

Related Questions