即使鼠标已经悬停在同一个元素上，也可以触发鼠标悬停答案

【问题标题】：Make mouseover fire even if it is already hovering this same element即使鼠标已经悬停在同一个元素上，也可以触发鼠标悬停
【发布时间】：2016-12-22 10:06:08
【问题描述】：

我有这种奇怪的行为，当悬停在任何元素上时，event.pageX 和event.pageY 在收听 over 事件时不会刷新其值。直到您 mouseleave 这个元素并再次将鼠标悬停在这个元素上之前，它似乎“卡住”了。理解起来很复杂，在下面的例子中很容易看到。

如果您将鼠标悬停在 svgs 元素上并且将 div 悬停在下方，则以下代码会在鼠标悬停时显示 event.pageX 和 event.pageY 值。（如果你运行嵌入代码sn-p，请点击右侧的“整页”按钮！）

问题是，如果你通过绿色圆圈，它会显示某些值。然后，如果您绕着这个圆圈移动，值不会刷新。您需要从一个元素转到另一个元素才能看到值增加/减少。 div 也是如此：如果您用鼠标“留在”div 中，您将不会注意到任何变化。但是，如果你在 div 内部/外部切换，它会刷新，但并不像我们想象的那么流畅......

即使我们已经悬停在元素上，我如何才能触发 mouseover 事件？

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>

【问题讨论】：

标签： javascript jquery mouseevent mouseover onmouseover

【解决方案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>

【讨论】：