时间戳

首页 > 解决方案 > 在覆盖层下方的元素上注入鼠标事件处理

javascript - 在覆盖层下方的元素上注入鼠标事件处理

问题描述

我有一种情况，我想处理覆盖下方元素的鼠标悬停事件。

指针事件确实有效，但我的问题是我无权访问该代码。我想将代码注入我没有任何访问权限的网站。

以下面为例：

document.getElementById('img').addEventListener('mouseover',()=>{alert('mouse event');});
<div id="topDiv" style="width:100px;height:50px;">
<img id="img" mouseover="javascript:alert('mouse moved over image);" src="https://www.shareicon.net/data/512x512/2016/07/08/117156_media_512x512.png"style="width:100px;height:100px;"/>
<!-- Commenting or hiding the overlay div below would trigger the event otherwise not -->
<div id="divOverlay" style="position:absolute;top:0;left:0;right:0;bottom:0;">
</div>
</div>

标签： javascripthtmlcss

解决方案

您可以尝试document.elementsFromPoint(x, y)获取元素列表的方法来指示光标下的元素。

document.querySelector('#divOverlay').addEventListener('mousemove', function(e){
  console.log(document.elementsFromPoint(e.clientX, e.clientY));
});

现在，当鼠标悬停img在覆盖层下方的元素上时，您将获得一个元素列表，如[div#divOverlay, img#img, ...]. 通过这种方式，您可以间接了解光标何时位于img.

但是，由于这是在mousemove事件处理程序中，您可能需要添加一些额外的逻辑，例如在第一次检测到您img在光标下之后删除事件侦听器 - 如果您实际上只需要对其执行mouseover操作。

推荐阅读