React OnMouseDown 事件不工作而 OnMouseUp 工作正常。（在 SVG 元素上）

Question

我有一个 svg 元素，我需要在其上捕获 mousedown 事件。这是代码。

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

点击处理程序的代码就这么简单。

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

onMouseUp 和 OnClick 工作正常，但 onMouseDown

相同的 onMouseDown 事件在 SVG 之外工作正常（我试过 Button）

关于错误的任何想法。

React Version: 16.5.2

Answer 1

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')
);

与 console.log 一起工作正常 link

Answer 2

OnMouseDown 如果您还实现了拖动功能，将获得一个块。

要捕获 OnMouseDown，您需要从 dragStartEvent

中删除 event.stopPropogation()

另一件有趣的事情是，如果您不想删除 event.stopPropogation()，您仍然可以执行您打算在 dragStartEvent 事件中对 OnMouseDown 执行的所有操作。

希望这对您有所帮助...

React OnMouseDown 事件不工作而 OnMouseUp 工作正常。（在 SVG 元素上）

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

javascript

svg

mouseevent

onmousedown

reactjs