Vue，SVG，鼠标悬停后，mouseleave 立即发生，同时仍在 SVG 矩形中

Question

我正在尝试创建一个 SVG NxN 活动位置正方形。 https://codepen.io/svsintel/pen/eYpKdaW（需要使用原生调试才能看到结果）我创建了一个 NxN 矩形正方形。我想知道我何时将鼠标悬停在一个矩形上。我首先创建一个位置对象

  created() {
let sz = this.brdsz;
let brd = new Object();
for (let a = 0; a < sz; a++) {
  let l = alph[a];
  let x = this.csize * (a + 1);
  for (let n = 0; n < sz; n++) {
    let k = l + (n + 1).toString();
    let y = this.csize * (sz - n) + this.csize;
    brd[k] = { id: k, x: x, y: y };
  }
}
this.board = brd;
console.log(this.board)

},

然后我使用 v-for 显示每个位置的矩形。

<div id="app">
  <svg ref="svg" class="lineclass" width="400" height="400"  version="1.1" 
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g ref="brd">
       <rect v-for="(cell,key) in board"
      :key="key"
      :id="key"
      class="noshow"
      :width="csize * 0.8"
      :height="csize * 0.8"
      :x="cell.x - csize*0.4"
      :y="cell.y - csize*0.4"
      @mouseover="mover($event)"
      @mouseleave="mleave($event)"
      @click="click($event)"
      @mousemove="mouse_move($event, key)"></rect>
    </g>
 </svg>
</div>

问题是当鼠标进入一个矩形时，我得到一个悬停事件，然后在鼠标仍在矩形中时得到一个离开事件。

因为它认为它不在rect中，所以点击也不起作用。参见 codepen https://codepen.io/svsintel/pen/eYpKdaW

Answer 1

默认情况下，您只会从您绘制的地方获得指针事件，fill:none 不算作在某物上绘制。您可以使用 pointer-events 属性.

修复此问题

在您的 CSS 中添加 pointer-events: visible;或者指针事件：visibleFill；取决于你想要什么。即

noshow {
  fill: none;
  stroke: black;
  stroke-width: 1;
  pointer-events: visible;
}

Vue，SVG，鼠标悬停后，mouseleave 立即发生，同时仍在 SVG 矩形中

Vue, SVG, after mousehover, mouseleave happens immediately after while still in SVG rect

javascript

svg

mouseleave

mousehover

vue.js