Windows 開發人員預覽版中的 IE10 或者 Metro 風格應用程式套件含了許多新的文件物件模型的特性，包括：進階點擊測試API — Advanced Hit Testing APIsCSSOM 浮點值支援 — CSSOMFloating Point Value Support媒體查詢監聽器 — Media Query Listeners觸摸和姿態 DOM 事件 — Pointer and Gesture DOM Events注意：這些特性在 IE10 或使用 HTML 的 Metro 風格應用都一樣能工作。進階點擊測試APIIE10 和 Metro 風格應用中的文件物件模型 (DOM)都支援 elementFromPoint 方法，該方法返回某個視區（viewport）中位於座標(X,Y)處的元素。這個方法對單一元素仍然有效，比如說點擊頁面上的某個圖片。但是，對於遊戲、圖形編輯器之類使用多個圖層的應用，點擊螢幕，是無法獲得相交於該點的所有東西的。IE10 引入了 msElementsFromPoint 和 msElementsFromRect 方法，這兩個方法可以獲得所有相交於指定的(X,Y)座標或者矩形地區的所有元素，並返回節點列表。msElementsFromPoint 方法msElementsFromPoint 方法以某點的座標 (X,Y)為參數，返回所有相交於該點的元素節點集合。. 該列表按 Z 順序排序，這意味著第一個元素就是最頂層的元素。msElementsFromPoint(x, y) 返回某點 （X,Y）座標之下的元素節點列表。下面的範例程式碼建立了一些重疊的不同顏色的 Div塊。當你點擊其中一個時， msElementsFromPoint 方法會得到點擊處的所有元素，並將背景顏色變為灰色。由於所有的顏色都會被返回，其中包括 body 和 html，所以我們只改變 nodeName 是 div 的元素的背景色。<!DOCTYPE html ><html ><head> <title>Hittest example</title> <style type="text/css"> button { position:absolute; top:600px; left:20px; } div { display:block; position:absolute; border:2px solid black; opacity:0.8; } #div1 { background-color:Red; left:200px; top:200px; height:200px; width:300px; } #div2 { background-color:Pink; left:150px; top:150px; height:200px; width:300px; } #div3 { background-color:Green; left:250px; top:250px; height:50px; width:80px; } #div4 { background-color:Yellow; left:400px; top:300px; height:250px; width:250px; } #div5 { background-color:Purple; left:275px; top:100px; height:500px; width:20px; } #div6 { background-color:Aqua; left:200px; top:175px; height:50px; width:400px; } #div7 { background-color:Fuchsia; left:430px; top:100px; height:375px; width:30px; } #div8 { background-color:Lime; left:175px; top:290px; height:40px; width:450px; } </style></head><body> <h1>getElementsFromPoint test</h1> <button id="refresh" onclick="refresh();">Refresh</button> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> <div id="div6"></div> <div id="div7"></div> <div id="div8"></div><script type="text/javascript"> window.addEventListener("click", testHit, false); function refresh() { window.location.reload(false); //reload page } function testHit(e) { if (document.msElementsFromPoint) //feature testing { var hitTargets = document.msElementsFromPoint(e.clientX, e.clientY); // get elements from point for (var i = 0; i < hitTargets.length; i++) { if(hitTargets[i].nodeName.toUpperCase() == "DIV") { hitTargets[i].style.backgroundColor = "gray"; } //if it‘s a div, gray it out. } } }</script></body></html>由於 msElementsFromPoint 返回所有相交於某點的元素，包括 html 等其他元素，代碼中通過 nodeName 屬性過濾出 div 元素。msElementsFromRect 方法msElementsFromRect 方法以一個方形地區為參數，返回所有相交於該地區的元素。這個方形地區由其左上方端點座標和其寬、高來定義。其定義如下：msElementsFromRect(left,top,width, height); 返回以left、top、width和height定義的方形之下的元素數組。上面的例子只需要添加 width 和 height 就可以使用 msElementsFromRect 了。例如：function testHit(e) { if (Document.msElementsFromRect) //feature testing { var hitTargets = document.msElementsFromRect(e.clientX - 25, e.clientY - 25, 50, 50); // captures elements within 50px block for (var i = 0; i < hitTargets.length; i++) { if(hitTargets[i].nodeName.toUpperCase() == "DIV") { hitTargets[i].style.backgroundColor = "gray"; } //if it’s a div, gray it out. } } }在這個更新的 testHit 函數中，當滑鼠點擊的時候，以點擊點為左上方，寬度為50像的正方形下的所有元素都會被返回。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
