时间戳

首页 > 解决方案 > 如何定位一个在一个 with Vue.js @mouseover?

javascript - 如何定位一个在一个 with Vue.js @mouseover?

问题描述

Codepen 与示例。

我有一个 SVG 地图，其中包含保存数据的各种路径。我想做的是在路径悬停时拿起州名。

我将一个事件侦听器附加到 svg 元素，并正在寻找 event.target 以从事件中获取特定路径。我构建了在方法对象中记录当前 event.target 的 handleStateHover：

<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 不应该总是显示悬停在父元素中的特定子元素吗？我究竟做错了什么？谢谢

标签： javascriptsvgvue.jsvuejs2vue-component

解决方案

这不完全是 vue 问题，而只是 vanilla js。

然而，有两件事需要：

  1. 过滤为只使用paths，然后从路径中获取名称dataset

handleStateHover (e) { if (e.target.tagName === 'path') { console.log(e.target.dataset.name); } }

  1. 将pointer-events: fill;样式添加到 svg
    默认情况下，鼠标指针使用盒子模型，因此您的事件不会正确区分状态

这是一个工作示例：https ://codepen.io/anon/pen/JeGELr

推荐阅读