Javascript 在溢出内容上跟踪鼠标移动

考虑以下示例，其中覆盖被放置在溢出内容的顶部：

window.addEventListener（'DOMContentLoaded'，（）=>{
const overlay=document.getElementById（'overlay'）；
overlay.addEventListener（'mousemove'，e=>{
警报（“使用：，[e.clientX，e.clientY]触发回调”）；
});
});
.container{
宽度：200px；
高度：300px；
外形：1px纯黑；
位置：相对位置；
}
.内胆{
身高：100%；
溢出：自动；
填充：0 20px；
}
#覆盖层{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景色：rgba（255,0,0,0.2）；
指针事件：无；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

打开鼠标移动。内部容器看起来是简单的解决方案。但如果你真的想使用覆盖，这也是一个解决方案


window.addEventListener（'DOMContentLoaded'，（）=>{
const overlay=document.getElementById（'overlay'）；
document.addEventListener（'mousemove'，e=>{
const bounding=overlay.getBoundingClientRect（）；
const invertial=e.clientY>=bounding.top&&e.clientY=bounding.left&&e.clientX在
.internal container
？@Teemu上监听mousemove怎么样？不幸的是，在我的实际用例中，这不起作用，因为内部容器被iframe完全占用。因此，只有当鼠标进入或离开i时，才会触发鼠标移动nner容器，但不是当鼠标在iframe内移动时。因此覆盖层实际上位于iframe的顶部，而iframe是滚动元素？这些是回答问题时的基本细节，我认为您应该提供一个更准确的示例…@Teemu您是对的。下面是一个更好的示例：