2009-08-11 42 views
107

Sử dụng Javascript làm cách nào để xác định phần tử tại một vị trí nhất định? Về cơ bản tôi đang tìm cách viết một hàm lấy hai tham số đầu vào (tọa độ x và y) và trả về phần tử html ở vị trí trên màn hình được đại diện bởi các tham số.Lấy phần tử tại vị trí đã chỉ định - JavaScript

+0

[elementsFromPoint] (https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint) –

Trả lời

197
+10

Nếu chỉ có 'document.elementsFromPoint' - trong trường hợp các phần tử chồng chéo. – Seiyria

+1

Tôi ngạc nhiên vì điều này đã làm việc ở mức 5.5 và hiện không được sử dụng nhiều như vậy. –

+0

Tôi đã thử phương pháp này và nó đo vị trí theo tài liệu. Làm thế nào để sử dụng nó liên quan đến phần tử cha? – Charas

24

Bạn có thể sử dụng có nguồn gốc phương thức JavaScript elementFromPoint(x, y), trả về phần tử tại tọa độ x, y trong viewport.

Xem elementFromPoint w3c draft

Và, một mẫu mã:

<html> 
<head> 
<title>elementFromPoint example</title> 

<script type="text/javascript"> 

function changeColor(newColor) 
{ 
elem = document.elementFromPoint(2, 2); 
elem.style.color = newColor; 
} 
</script> 
</head> 

<body> 
<p id="para1">Some text here</p> 
<button onclick="changeColor('blue');">blue</button> 
<button onclick="changeColor('red');">red</button> 
</body> 
</html> 

Bạn có thể sử dụng setInterval() để liên tục kiểm tra sự kiện di chuột của phần tử nhưng nó không được khuyến khích, cố gắng sử dụng .hover(...) và css thay vì để nâng cao hiệu suất ứng dụng.

Các vấn đề liên quan