クリックしたピクセル内の要素を取得しますか？

Question

私はこれをどこから始めるべきかわからないが、私は数日間、ページ上の選択/クリックされたピクセル内の要素を取得する方法を見つけようとしている。私は同僚からこの機能に出くわしたが、私はそれが何をするか見当がつかない：

簡単に言えば

function onclick(e){ 
    var x = e.clientX, 
     y = e.clientY; 

    $("*").filter(function(){ 
     position.left > x && position.left + width < x; 
     /*same for height*/; 
    }); 
} 

、私はピクセルをクリックして、そのピクセル内にあるDIV /要素を取得できるようにする必要があります。要素が不透明度とZ-インデックスで重なり合っているため、たとえばdiv .classと言っているだけのアプリでは簡単ではありません。

Answer 1

変数position、widthが定義されていないので、問題に示されるようにコードが動作しないであろう、しかし、その基本的な考え方が正しい - ループのすべての要素を介してAの座標を比較します各要素のボックスをクリックします。

自分自身で試してみたいです。スニペットの代わりに作業デモhereを移動しました。

Answer 2

文書内のどこをクリックしても、クリックされた要素がログに記録されます。

$(document).click(function(e) { 
 
    console.log(e.target); 
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'></div>

Answer 3

あなたは、xとy COORDSで要素を取得したい場合は、document.elementFromPoint(x, y);を使用することができます。 ドキュメントの場合はhereをご覧ください。

function onclick(e){ 
    var x = e.clientX, 
     y = e.clientY, 
     el = document.elementFromPoint(x, y); 
} 

Fiddle here