我遇到一种情况,我想处理将鼠标悬停在覆盖层下方的元素上的事件。
指针事件确实起作用,但是我的问题是我无法访问该代码。我想将代码注入到我没有任何访问权限的网站上。
以下面的示例为例:
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>
答案 0 :(得分:0)
您可以尝试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
操作。