Q

在指定位置獲取元素 - JavaScript

2009-08-11 167 views 107 likes

107

使用Javascript如何識別給定位置的元素？基本上我正在尋找編寫一個函數，它接受兩個輸入參數（x和y座標），並返回參數所代表的屏幕位置上的html元素。在指定位置獲取元素 - JavaScript

2009-08-11 kjv

+0

[elementsFromPoint]（https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint） – 2016-05-24 12:48:44

A

回答

197

document.elementFromPoint(x, y);

http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint

http://msdn.microsoft.com/en-us/library/ms536417%28VS.85%29.aspx

https://developer.mozilla.org/en/DOM/document.elementFromPoint

2009-08-11 10:53:17 rahul

+10

如果只有'document.elementsFromPoint' - 如果元素重疊。 – Seiyria 2014-07-30 15:16:24

+1

我很驚訝這在ie 5.5中工作，並沒有那麼多今天使用。 – 2015-01-20 14:32:10

+0

我試過這種方法，它根據文檔測量位置。我如何使用它相對於父元素？ – Charas 2015-09-08 10:44:43

24

您可以使用原生的JavaScript elementFromPoint(x, y)方法，即在視口中的座標x返回元素，Y。

見elementFromPoint w3c draft

而且，代碼示例：

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

您可以使用setInterval()不斷地檢查元素的懸停事件，但它不建議，儘量使用.hover(...)和CSS，而不是提升應用性能。

2011-07-11 16:49:18

相關問題