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

Question

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

onClick is equal to onMouseUp + onMouseDown.Why are you using them all? — Root, Dec 12 '18 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, Dec 12 '18 at 13:12
Could you post a full example? This minimal example works as expected: https://codesandbox.io/s/lrz0kr87kl — Tadas Antanavicius, Dec 12 '18 at 13:13

score 4 · Accepted Answer · answered Dec 14 '18 at 10:50

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

score 3 · Answer 2 · edited Jan 18 '20 at 07:30

3

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

edited Jan 18 '20 at 07:30

SherylHohman

16,580
17
88
94

answered Dec 12 '18 at 13:19

Satheesh

171
6

I think there is a typo: should `stroke-width` be `strokeWidth` ? Here is a [CodeSandbox link](https://codesandbox.io/s/nostalgic-surf-8s6gt) of a slightly modified version of the above code running in an online repl. (code is in App.js, Click "console" below the output box in order to see content of the Console.) – SherylHohman Jan 18 '20 at 07:44
(I reverted theprevious edit: it changed the code itself, introducing syntax errors - it changed the html tags, probably by accident. Then edited to fix indentation, also wrapping the return html in `()` so opening div tag could be moved to next line, and all html tags could then be lined up for clarity - it's the standard way to `return ` React/HTML code.) – SherylHohman Jan 18 '20 at 07:49

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

2 Answers2