要素が表示され、クリック可能かどうかを確認する方法はありますか？

Question

要素がであるかどうかを確認できるメソッドまたは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; 
} 

を

他の要素がinsertme要素のコンテナより多くのzindexを持つため、ある場合は要素が内側に表示されます。私はそれを身体>直接の子要素にすることができましたが、要素の高さを変えるたびにその位置への変更が必要でした。

それは要素と見た後になるまで、あなたは相対的に絶対的からそれを変更し、おそらくよりパフォーマンス、そして左/トップのためのいくつかの計算を行い、1つのDOM要素まで

またはを赤の要素を移動することができますスペースを取るようにしてください。2番目のケースでは表示されません（これは設計上の観点からは偉大ではありません）。

この2つのケースのいずれかで、要素（このフィドルの赤い要素）が実際に表示され、要素の上にクリック可能であるかどうかを知る必要があります。これを見つけることができるライブラリはありますか？

jsfiddleの具体的な提案を返信しないでください。これは最小のテストケースです。ユーザーが追加したスタイルはもちろんのこと、多くの異なるスタイルがページをテーマにしていると仮定します。また、これはブラウザ専用の動的アプリでなければならないため、Seleniumについては言及しないでください。

Answer 1

elementFromPoint()を使用して、必要な要素がオフセット座標の先頭要素であるかどうかをテストできます。

それのこのあなたの問題のための完全なテストではありませんが、あなたを与えるのを助ける必要がある一部

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

}) 

注私は唯一の左上隅を確認し、あなたはおそらくそれの多くのがより表示されているかどうかを確認したいと思いますそのコーナー。あなたは明確に質問を読んでいない@guradio

DEMO