即使鼠标已经悬停在同一元素上，也要触发鼠标悬停事件

Question

我有一个奇怪的问题，当鼠标悬停在任何元素上时，监听“over”事件时，event.pageX和event.pageY的值不会刷新。它似乎被“卡住了”，直到你离开此元素并再次悬停在其上。这个问题很难理解，但在以下示例中可以轻松看到。

下面的代码在鼠标悬停在svg元素或下面的div元素上时显示event.pageX和event.pageY的值。（如果你运行嵌入的代码片段，请单击右侧的“全屏”按钮！）

问题是如果你经过绿色圆圈，它会显示某些值。然后，如果你在该圆圈周围移动，值将不会刷新。你需要从一个元素移动到另一个元素才能看到值增加/减少。对于div同样适用: 如果你用鼠标“停留”在div内部，你会注意到没有变化。但是，如果你在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>

- Anwar

Answer 1

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

更新的演示

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

- Rory McCrossan