获取点击像素中的元素？

Question

我不确定从哪里开始，我已经谷歌搜索了几天，试图找出如何获取页面上选定/点击的像素内的元素。我从同事那里得到了这个功能，但我不知道它的作用：

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

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

简单地说，我需要能够单击一个像素并获得该像素内的div /元素。我的应用程序并不像简单地说div .class那样简单，因为元素与不透明度和z-index相互重叠。

Answer 1

单击文档中的任何位置将记录单击的元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想通过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

Answer 3

问题中显示的代码不起作用，因为变量position，width未定义，但其基本思想是正确的 - 循环遍历所有元素并比较点击的坐标每个元素的框。

想亲自尝试一下。移动了工作演示here而非代码段。