即使它已经悬停在同一个元素上，也会触发鼠标悬停

Question

我有这种奇怪的行为，当鼠标悬停在任何元素上时，event.pageX 和 event.pageY 在收听 over 事件时不会刷新其值。看起来 "stuck" 直到你 mouseleave 这个元素并将鼠标再次悬停在这个元素上。理解起来比较复杂，在下面的例子中很容易看出。

以下代码在鼠标悬停时显示 event.pageX 和 event.pageY 值，如果您将鼠标悬停在 svgs 元素上，如果您将 div 悬停在下方。（如果您运行嵌入代码片段，请点击右侧的"full page"按钮！）

问题是如果你穿过绿色圆圈，它会显示某些值。然后，如果你绕着这个圈子走，价值观就不会刷新。您需要从一个元素转到另一个元素才能看到值 increasing/decreasing。 div 也是如此：如果你用鼠标 "stay inside" 和 div，你会发现没有任何变化。但是，如果切换inside/outside和div，它会刷新，但并不像我们想象的那么流畅...

即使我们已经悬停在元素上，我怎样才能触发鼠标悬停事件？

JSFiddle

$(function() {
  $('body').on('mouseover', '#svg1', function(event) {
    var pageX = event.pageX || null;
    var pageY = event.pageY || null;

    $('#pageValuesSVG #pageX').text(pageX);
    $('#pageValuesSVG #pageY').text(pageY);
  });

  $('body').on('mouseover', '#regularDiv', function(event) {
    var pageX = event.pageX || null;
    var pageY = event.pageY || null;

    $('#pageValuesPage #pageX').text(pageX);
    $('#pageValuesPage #pageY').text(pageY);
  });
});

.mySVG {
  width: 400px;
  height: 300px;
  border: solid 1px lightgrey;
}
.rectangle {
  fill: red;
}
.circle {
  fill: green;
}
.regularDiv {
  width: 300px;
  height: 100px;
  border: solid 1px lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<svg class="mySVG" id="svg1">
  <g id="layer_rectangles">
    <rect x="0px" y="0px" width="100px" height="20px" class="rectangle"></rect>
  </g>
  <g id="layer_circles">
    <circle x="10px" y="10px" cx="30px" cy="30px" r="30px" class="circle"></circle>
  </g>
</svg>
<div id="pageValuesSVG">
  Page values on hover svg : <span id="pageX"></span>  <span id="pageY"></span>
</div>
<div id="pageValuesPage">
  Page values on hover page : <span id="pageX"></span>  <span id="pageY"></span>
</div>
<div id="regularDiv" class="regularDiv">

</div>

Answer 1

mouseover 事件仅在鼠标移动到元素时触发。如果您想在鼠标 在元素上移动 时更新值，请改用 mousemove：

Updated fiddle

$(function() {
  $('body').on('mousemove', '#svg1', function(event) {
    var pageX = event.pageX || null;
    var pageY = event.pageY || null;

    $('#pageValuesSVG #pageX').text(pageX);
    $('#pageValuesSVG #pageY').text(pageY);
  });

  $('body').on('mousemove', '#regularDiv', function(event) {
    var pageX = event.pageX || null;
    var pageY = event.pageY || null;

    $('#pageValuesPage #pageX').text(pageX);
    $('#pageValuesPage #pageY').text(pageY);
  });
});

.mySVG {
  width: 400px;
  height: 300px;
  border: solid 1px lightgrey;
}
.rectangle {
  fill: red;
}
.circle {
  fill: green;
}
.regularDiv {
  width: 300px;
  height: 100px;
  border: solid 1px lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<svg class="mySVG" id="svg1">
  <g id="layer_rectangles">
    <rect x="0px" y="0px" width="100px" height="20px" class="rectangle"></rect>
  </g>
  <g id="layer_circles">
    <circle x="10px" y="10px" cx="30px" cy="30px" r="30px" class="circle"></circle>
  </g>
</svg>
<div id="pageValuesSVG">
  Page values on hover svg : <span id="pageX"></span>  <span id="pageY"></span>
</div>
<div id="pageValuesPage">
  Page values on hover page : <span id="pageX"></span>  <span id="pageY"></span>
</div>
<div id="regularDiv" class="regularDiv">

</div>

即使它已经悬停在同一个元素上，也会触发鼠标悬停

Make mouseover fire even if it is already hovering this same element

javascript

jquery

mouseevent

mouseover

onmouseover