如何防止 svg 在特定元素上拖动？答案

【问题标题】：How to prevent svg drag on specific element?如何防止 svg 在特定元素上拖动？
【发布时间】：2019-07-05 22:10:16
【问题描述】：

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

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

如何防止鼠标拖动？

【问题讨论】：

标签： mouseevent draggable svgpanzoom

【解决方案1】：

您可以have 2 layers（如果您不需要平移/缩放该元素）。
或者您仍然可以保持所有元素的缩放，但只能缩放some of them listening for events。只需将您想要侦听事件的所有内容放在一个 SVG 组元素 <g> 中并将其设置为侦听事件。
最后的解决方案是到 override default events 进行单击/拖动并编写您自己的处理程序。

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

【讨论】：

我从 Web 服务获取我的 SVG，在这种情况下，我添加了我的新元素，我想与其他元素一起拖动/缩放这个元素。第二个没问题，但我需要听除一个之外的所有元素，而不仅仅是某人，所以我至少需要一个背景元素......我用第三种解决方案和一些原始源代码解决了，因为 publicInstance 没有不包含handleMouseDown()，我需要拦截它。
您仍然可以使用第二种解决方案，因为您可以拥有 2 个根元素。元素 1 将是您不想听的元素。元素 2 将是一个组，将包含所有其他元素（您将监听此元素）。
此解决方案的第二个根元素是否需要背景元素？
SVG 不需要你有背景元素（我什至不知道这样的东西是否存在）。所以不，你不需要背景元素。或者也许你会。我不知道你的具体情况是什么。