Javascript 如何为滚动（跳过）元素注册鼠标覆盖/输入事件？

我想为以下任一项注册javascript事件：

用户将鼠标悬停在任何“a”元素上

用户正在向下/向上滚动页面，任何“a”元素的移动都与光标的位置相交 第一个显然非常简单，但我正在与#2作斗争，因为在Chrome中，滚动是不平滑的，元素将“跳过”光标位置，而不会触发典型的JS事件

如果滚动速度足够快，在FF等中滚动也是“非平滑”的

我只是觉得这不值得，但你可能需要做的是：

加载时，获取每个锚的位置并确定其面积

将所有可能的坐标收集到对象数组中（索引）

• {id:'my-anchor-1'，x:100，y:100}

在MouseMove中，对照数组检查坐标（即，检查旧鼠标位置和新鼠标位置之间的每个坐标，正如其他评论者所说）

通过这种方式，您可以提前完成大部分计算和DOM选择，从而使mousemove事件变得更加容易。如果添加到页面中的内容后来改变了定位点，这可能会变得混乱：您必须重新计算数组，但相对于mousemove，这种情况发生的频率较低，如果您所做的只是追加，您可以简单地添加到其中

解决调整大小的问题，等等。这实际上取决于你的观众是谁，以及你认为在最坏的情况下，你会有多少主播。因为这是mousemove，所以我们所说的台式机/笔记本电脑很少调整窗口大小，特别是相对于mousemove事件

如果您只有少数几个锚，并且您认为会有很多变化，那么创建索引就没有多大意义，您可以在事件本身中进行计算（但至少缓存DOM选择）。但是如果你认为你会有很多锚，特别是如果它们不太可能移动，我认为为它们建立索引对于性能来说是非常有意义的

我希望您不介意我也使用了jQuery：

var y=[]；
var-ym=[]；
$（文档）.mousemove（函数（e）{
ym.推（e.pageY）；
});
$（文档）。滚动（函数（e）{
y、 推送（document.body.scrollTop+ym[ym.length-1]）；
如果（y.长度-1）
{  
如果（（y[y.length-2]<$（“#a”）.offset（）.top和&y[y.length-1]>$（“#a”）.offset（）.top）+$（“#a”）.height（）||
y[y.length-1]<$（“#a”）.offset（）.top和&y[y.length-2]>$（“#a”）.offset（）.top）+$（“#a”）.height（））
{
if（$（“#a”）.offset（）.leftxm[xm.length-1]）
{
这是你想要的功能
}
}
}
});

我不知道它是否有效，但我认为你应该试试

---

你不可能做到这一点，无论如何，如果没有一个大规模的肮脏的黑客。鼠标悬停在元素上时触发mouseover事件。如果它没有发生，这并不是一个有趣的问题（+1），但你到底需要这个做什么呢？我认为有一个很好的UX理由，当滚动过去时不触发交互…肮脏的黑客方法：每当鼠标移动（在文档的任何部分上）时，你就存储它的位置（相对于文档）。注册一个滚动更改事件，当该事件触发时，计算新的鼠标位置（相对于文档），将其与以前的“mousemove”位置进行比较，您可以创建一个有效的“移动线”。检查此线是否与任何

a

元素相交。祝你好运您可能需要测试页面中的每个元素与鼠标起点和终点之间绘制的线之间的交点。对于包含大量元素的页面来说，这可能会非常昂贵。相关问题：

mouseenter

和

mouseout

事件在鼠标指针下滚动时是否不起作用？这不会解决跳过元素的问题，充其量它将提供检测鼠标是否在元素上的能力，但这可以通过使用mousemove事件轻松完成。另外，预加载元素位置/位置数据列表对于位置可能发生变化（浏览器大小变化、动态内容等）的页面不好。我同意。我认为“检查你的坐标”很明显，你应该像其他人一样检查开始和结束之间的每个坐标commented@musefan就预压而言，哪一个更好：1。由于调整大小/动态内容，在会话期间重新计算几次，或2次。每次mousemove事件触发时重新计算每个锚点的每个位置？我认为前者

var y = [];  
var ym = [];
$(document).mousemove(function(e) {
  ym.push(e.pageY);
});
$(document).scroll(function(e) { 
  y.push(document.body.scrollTop+ym[ym.length-1]);
  if(y.length-1)  
  {  
    if((y[y.length-2] < $("#a").offset().top && y[y.length-1] > $("#a").offset().top)+$("#a").height() ||
    y[y.length-1] < $("#a").offset().top && y[y.length-2] > $("#a").offset().top)+$("#a").height())
    {
      if($("#a").offset().left < xm[xm.length-1] && $("#a").offset().left+$("#a").width() > xm[xm.length-1])
      {
        HERE IS your desired function
      }
    }
  }
});