javascript - React OnMouseDown 事件不工作而 OnMouseUp 工作正常。(在 SVG 元素上)

标签 javascript reactjs svg mouseevent onmousedown

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

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

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

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

onMouseUpOnClick 工作正常,但不是 onMouseDown

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

关于错误的任何想法。

React 版本:16.5.2

最佳答案

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

OnMouseDown 将获得一个 block 。

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

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

希望这有助于...

关于javascript - React OnMouseDown 事件不工作而 OnMouseUp 工作正常。(在 SVG 元素上),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53742817/

相关文章:

javascript - charAt 不适用于标签上的 jquery text() 但适用于简单的字符串

javascript - JestJS 测试在 request-promise-core 内部失败

node.js - 在没有 postcss 的情况下安装 react-scripts

jquery - 中心 SVG 图表宽度 jQuery

javascript - 如何使用 html 或 xhtml 中的图像标签读取和更改 svg 文件内的元素?

javascript - 如何在服务器端使用D3js直接生成SVG?

javascript - 在不影响第一行的情况下,每隔一行缩进表格。 html/css/js/jQuery

javascript - IOS 上的 HTML5 音频 : how can currentTime be less than initial value?

javascript - 为什么我无法在查询中提交数据,并在 GraphQL 中的突变中获取数据?

javascript - React - componentWillReceiveProps 中的 setState