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，您需要从event.stopPropogation()中删除dragStartEvent

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

希望这对您有帮助...

React OnMouseDown事件无法正常工作，而OnMouseUp可以正常工作。（在SVG元素上）

2 个答案: