获取点击像素内的元素？

我不知道从哪里开始，我已经Google了几天，试图找出如何获取页面上选定/单击像素内的元素。我碰到这个功能从一个同事，但我不知道它做什么：获取点击像素内的元素？

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相互重叠。

来源

2017-02-21 Joe Scotto

你是什么意思“像素内”？你的意思是像素所在的元素？ – isherwood

@isherwood基本上，点击的地方就是它会选择的元素。忽略DOM，只能通过填充，宽度，边距等元素来抓取元素。 –

看看为什么会发生，用一些CSS来设置'a {color：transparent;背景：红色; }因为文本元素是矩形，就像没有应用CSS裁剪的其他元素一样。根据与您单击的元素中的字符串相关联的文本引擎，您必须从字面上执行接近魔术以确定您单击的位置是空格还是负空格。所以我敢肯定，如果没有一些真正的花式和精巧的代码魔法，这是不可能的。 –

代码如图所示的问题将无法工作，因为变量position，width没有定义，但其基本的思路是正确的 - 遍历所有的元素和比较的坐标点击每个元素的框。

想自己试试。移动工作演示here而不是片段。

来源

2017-02-21 17:35:07

**编辑：**将演示移至外部页面，因为此片段环境对于此示例太过分了。 –

这就是我想要的，我会接受答案。从我读过的内容来看，这个数字和你所能得到的一样好。谢谢。 –

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

$(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>

来源

2017-02-21 16:29:42

这正是我'不'要和'不会'工作。我的应用程序中的元素与z-index和不透明度相互重叠，因此我不能只选择点击的元素，我会根据点击的像素进行区分。 –

我认为这几乎是不可能的。如果我错了，这是可能的，它将需要*很多代码。* –

@Kinduser相当可能，而不是太多的代码。看到我的答案。尽管解释了一些有趣的问题，比如如何处理iframe，边界半径等，确实意味着更多的工作。 –

你可以使用document.elementFromPoint(x, y);，如果你想获得由x和y COORDS的元素。查看here的文档。

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

Fiddle here

来源

2017-02-21 16:31:12 Steveo

就像我所料。它不起作用。 https://jsfiddle.net/af2m32sv/2/ –

这是一个很酷的方法，但它只返回最顶层的单击元素。提供的MDN文章很明确。 –

获取点击像素内的元素？

回答

相关问题