mouseevent - 如何防止 svg 在特定元素上拖动？

Question

我正在使用出色的 svg-pan-zoom 插件 ( https://github.com/ariutta/svg-pan-zoom ) 来平移/缩放我的 svg 元素，我想启用鼠标拖动来移动它。

我的 svg 中有一个元素，我想在其中阻止拖动，因为它有一个单击事件，当用户单击它时，有时它会拖动 svg 元素。请求的行为是作为标准拖动，除非鼠标在此元素上。我已经尝试使用 event.stopPropagation() 和 event.preventDefault() 但似乎 svg-pan-zoom 插件有自己的事件管理。

如何防止鼠标拖动？

Answer 1

1. 您可以有 2 层（如果您不需要平移/缩放该元素）。

2. 或者您仍然可以保持所有元素的缩放，但只有其中一些元素在监听事件。只需将您想要侦听事件的所有内容放在一个 SVG Group 元素中<g>并将其设置为侦听事件。

3. 最后的解决方案是覆盖单击/拖动的默认事件并编写您自己的处理程序。

如果您不需要缩放元素，我会推荐选项 1，否则推荐选项 2。