我有一个 SVG map ，其中包含保存数据的各种路径。我想做的是将鼠标悬停在路径上时选取州名称。
我将一个事件监听器附加到 svg 元素，并正在寻找 event.target 以获取事件的特定路径。我构建了handleStateHover，它在方法对象中记录当前的event.target:
<svg style="stroke-linejoin: round; stroke:#000; fill: none;"
width="100%"
height="600"
viewBox="0 0 1000 600"
version="1.1"
id="svg"
@click="handleStateClick"
@mouseover="handleStateHover">
handleStateHover (e) {
console.log(e.target)
}
问题是，e.target 似乎记录了 svg 元素而不是路径元素。有时它确实按预期显示路径元素，但随后又快速更改为 svg 元素。
您可以通过打开控制台并查看 JS 日志来查看。
有人如何一致地获取悬停事件上的路径元素吗？ e.target 不应该始终显示悬停在父元素中的特定子元素吗？我究竟做错了什么？谢谢
最佳答案
这不完全是 vue 问题，而只是普通 js 问题。
但是，有两件事需要:
- 过滤为仅使用
路径，然后从路径的数据集获取名称
handleStateHover (e) {
if (e.target.tagName === '路径') {
console.log(e.target.dataset.name);
}
}
pointer-events: fill; 样式默认情况下，鼠标指针使用盒模型，因此您的事件将无法正确区分状态
这是一个工作示例:https://codepen.io/anon/pen/JeGELr
关于javascript - 如何使用 Vue.js @mouseover 将 <svg> 中的 <path> 作为目标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53194593/