jquery 有没有一种方法可以检测元素何时变得不可见?

cdmah0mi  于 12个月前  发布在  jQuery
关注(0)|答案(1)|浏览(187)

是否有可靠的方法来检测元素何时变得不可见从用户的Angular 来看?因此,它不仅应该检查 display:nonevisibility:hidden 之类的内容,还应该检测另一个具有更高z索引的元素何时被放置在元素之上。
(我不这么认为,但我还是要问,以防我错了。
编辑:好了,问题已经结束了,“更新问题,使它只关注一个问题”。我不知道如何更好地表达自己,检测一个元素何时从用户的Angular 变得不可见对我来说似乎是一个单一的问题。这里是我上面给出的例子的一些代码,希望能使问题更清晰:

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#btn0").click(function(){
        $("#div0").css({"visibility":"visible"});
    }); 
});
</script>
</head>
<body>

<button id = "btn0">Click to hide this button with something</button> 
<div id="div0" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;background-color:green;visibility:hidden">Now you can't see the button</div>

</body>
</html>

字符串
所以,用户点击按钮,div弹出。按钮仍然在div元素后面。它的“visibility”或“display”值没有改变。但对用户来说,它是不可见的。所以我想要的是我可以订阅的按钮的某种可靠的“elementUserVisibilityChanged”事件。

s71maibg

s71maibg1#

Intersection ObserverAPI就是要做到这一点.

  • “Intersection Observer API提供了一种方法来异步观察目标元素与祖先元素或顶级文档视口的交集中的更改。"*

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
它可以变得相当复杂,这取决于您的需要,所以快乐阅读!

相关问题