javascript - 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 版本:16.5.2

Answer 1

如果您还实现了拖动功能，

OnMouseDown 将获得一个 block 。

要捕获 OnMouseDown，您需要从 dragStartEvent 中删除 event.stopPropogation()

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

希望这有助于...