獲取點擊像素內的元素？

我不知道從哪裏開始，我已經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文章很明確。 –

獲取點擊像素內的元素？

回答

相關問題