有没有办法看到元素是否可见，可点击？

是否有任何方法或JavaScript库，可以看到一个元素是否真的完全可见？举个例子，假设你需要某些元素，而不是之间显示出一些UI按钮占用更多的空间在页面上，因为这个例子： https://jsfiddle.net/akyh7e5f/有没有办法看到元素是否可见，可点击？

HTML：

<div style="width:50%; display:inline-block"> 
<div class="a"> 
<div> 
Some content here. 
</div> 
<div class="inserter"> 
insertme 
</div> 
</div> 
<div class="b"> 
<div> 
some other content 
</div> 
</div> 
</div> 

<div style="width:49%; display:inline-block"> 
<div class="a" style="z-index:1"> 
<div> 
Some content here. 
</div> 
<div class="inserter"> 
insertme 
</div> 
</div> 
<div class="b" style="z-index:2"> 
<div> 
some other content 
</div> 
</div> 
</div>

CSS：

.a { 
    height:80%; 
    background: blue; 
    position:relative; 
} 
.b { 
    padding:30px; 
    background:green; 
    position:relative; 
} 

.inserter { 
    position:absolute; z-index:9999; 
    left:50%; margin-left:-20px; 
    background: red; 
}

在一种情况下，元素在里面，并在另一种情况下显示，因为其他元素的zindex比insertme元素的容器多。我可以使它body>元素直接子元素，但是每次改变元素的高度都需要改变位置。

，直到它的元素，可见后，您可以移动红色元素了一个DOM元素，然后做一些计算的顶部/左，

或，或许更高性能，它从绝对到相对变化并且占用空间，在第二种情况下它不会显示（从设计角度来看，这不是很好）。

在这两种情况下，我需要知道元素（此元素中的红色元素）实际上是否可见并且可点击且元素上方没有元素。有没有可以找到这个的图书馆？

请不要回复jsfiddle的具体建议 - 这是一个最小的测试用例，假设许多不同的样式可能以任何方式为主题页面，更不用说用户添加的样式。另外请不要提硒，因为这必须是一个浏览器只有动态的应用程序。

来源

2017-01-18 NoBugs

@guradio你显然没有看过的问题。 – ceejayoz

我看到一个可能在这里有帮助的例子：http://stackoverflow.com/questions/5598953/find-elements-that-are-stacked-under-visually-an-element-in-jquery ...可能是一个缓慢的方法来做到这一点。希望这可以帮助。 –

@LeonBambrick非常接近这个问题，你也可能会觉得这很有帮助。 http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection –

可以使用elementFromPoint()来测试您想要的元素是否是其偏移坐标处的顶层元素。

这不是你的问题进行了充分的测试，但是应该可以帮助给你它的一部分

$('.inserter').each(function(){ 
    var offset= $(this).offset(); 
    var topEl = document.elementFromPoint(offset.left, offset.top); 
    console.log(topEl == this) 

})

注意，我只检查了左上角，你可能会想看看更多的是显示比就在那个角落。

DEMO

来源

2017-01-18 02:36:11 charlietfl

有没有办法看到元素是否可见，可点击？

回答

相关问题