CODEWITHSUNDEEP
javascriptvue.jssvgmouseleavemousehover
Shaun Savage
Shaun Savage

Reputation: 3

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

I am trying to create an SVG NxN square of active locations. https://codepen.io/svsintel/pen/eYpKdaW ( you need to use native debug to see results) I create a square of NxN rect. I want to know when I am hovering over a rect. I first create a object of locations 

  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)

},

Then I use v-for to display the rect for each location.

<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>

The problem is when the mouse enters a rect I get a hover event and then a leave event while the mouse is still in the rect.

Because it thinks it is not in the rect, click does not work also. See codepen https://codepen.io/svsintel/pen/eYpKdaW

Upvotes: 0

Views: 628

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

By default you only get pointer events from places you've drawn on and fill:none doesn't count as drawing on something. You can fix this with the pointer-events property.

In your CSS add either pointer-events: visible; or perhaps pointer-events: visibleFill; depending on exactly what you want. I.e.

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

Upvotes: 2

Related Questions