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

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

• javascript
• reactjs
• svg
• mouseevent
• onmousedown

Share Improve this question Follow edited Dec 12, 2018 at 14:14 Craws 58755 silver badges3535 bronze badges asked Dec 12, 2018 at 12:14 Ajinkya DhoteAjinkya Dhote 1,47833 gold badges1414 silver badges2626 bronze badges 3

• 1 onClick is equal to onMouseUp + onMouseDown.Why are you using them all? – Root Commented Dec 12, 2018 at 12:45
• @Root, there are some operations I want to perform when the element in mouse press and some operation as soon as the mouse button is released. – Ajinkya Dhote Commented Dec 12, 2018 at 13:12
• Could you post a full example? This minimal example works as expected: codesandbox.io/s/lrz0kr87kl – Tadas Antanavicius Commented Dec 12, 2018 at 13:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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...

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