jsを使用して最上部に要素の部分があるかどうかを確認するにはどうすればいいですか？

Question

この点を引数として指定したelementFromPointがこの要素を返す点が存在する場合は、特定の要素をチェックする必要があります。私はその点を見つける必要はありません - もし少なくとも1つがあれば、ちょうど情報。これは、「別の要素で覆われていない要素の部分が存在する場合」と同等です。

例：JSFiddle - これら二つのためtrueを返すべき所望の機能「上に」あるnum2とnum3の部分があるからです。しかし、num1の結果はfalseになるはずです。

Answer 1

私はelement.getClientRects()を使用して、要素の境界線を取得するこの強引なオプションよりも良い方法があるかどうか分からないし、それが今までその要素を返すかどうかを確認するためにelementFromPointとその領域を反復処理：

var checkIfOnTop = function(el) { 
 
    console.log("Checking",el); 
 
    var rect = el.getClientRects()[0]; 
 
    for (var x = rect.left; x <= rect.right; x++) { 
 
    for (var y = rect.top; y <= rect.bottom; y++) { 
 
     if (document.elementFromPoint(x, y) === el) { 
 
     console.log("This element is reachable by click at ",x,y); 
 
     return true; 
 
     } 
 
    } 
 
    } 
 
    console.log("This element is not reachable by click"); 
 
    return false; 
 
} 
 

 
checkIfOnTop(document.getElementById('num1')); 
 
checkIfOnTop(document.getElementById('num2')); 
 
checkIfOnTop(document.getElementById('num3'));

#container { position: relative } 
 
#num1 { position: absolute; left: 50px; height: 200px; width: 200px; background-color: blue} 
 
#num2 { position: absolute; left: 50px; height: 200px; width: 200px; background-color: green} 
 
#num3 { position: absolute; left: 100px; height: 200px; width: 200px; background-color: red}

<div id='container'> 
 
    <div id='num1'></div> 
 
    <div id='num2'></div> 
 
    <div id='num3'></div> 
 
</div>

非常に大きな要素にはお勧めできません。