[分享] elementFromPoint() 模擬 Google feedback 效果

最近很熱門的Google +，其中最讓自己感覺最深刻的部份就是feedback system，整個的回饋機制十分貼心，運作上也是十分流暢。不過最讓人好奇的地方就是，為什麼進入feedback system 之後，會發現更神奇的地方。

為何在最上層有個 iframe mask，可是當我滑鼠移動的時候卻可以取得底下的物件！？這到底是怎麼回事呢？

經過幾番尋找之後，透過Flyworld 得知，原來可以使用elementFromPoint 的方式，利用滑鼠座標取得目前指到的元素(Element)。

似乎看到了一點署光，可以試著用elementFromPoint 來取得目前的物件。



作法：


HTML

<!--//many HTML element-->
<!--iframe is a mask.-->
<iframe id="mask" src="inner.html" style="border: 1px solid red; position: absolute; background: #000;width:100%; height: 100%;opacity: 0.5;filter:alpha(opacity=50);"></iframe>

接著在HTML裡面的Javascript code ，建立一個getElement的方法，在滑鼠移動座標的同時，會將mask iframe 移開，再瞬間移動回來，回傳目前得知的元素(element)

Javascript

function getElement(e) {
    $("#mask").css("top", "-9999px");
    ele = document.elementFromPoint(e.clientX, e.clientY);
    $("#mask").css("top", "0");
    return ele;
}

接著maks iframe裡面我們也要做些手腳，當滑鼠移動的同時，事件觸發主要還是在mask上面產生，因此mask 的頁面中只需要加上javascript code.

Mask ifram javascript

function eventHandle(e){
    e.cancelBubble=true;
    // this is the element from Top view.
    var elm = top.getElement(e);
    // do something  
}

document.onmousemove=eventHandle;

如此完成Mask跟主要頁面的溝通，並且可以藉由滑鼠移動取得目前元素，感覺還蠻實用的。

實例：
Live demo link

一開始進入頁面會是這樣子，灰色效果為Mask遮罩，底下元素全部都被覆蓋

滑鼠移動之後，會出現物件黃色框框，乍看之下好像是在元素上加上border，實際上呢？

實際上是取得頁面物件後，將此元素的座標大小（寬高）重製一個放在在Mask iframe裡面

完成隔著mask卻可以實際取得元素的方法！

後記：
主要感謝協助的各位，提供這麼好用的方法，之前根本就不曉得elementFromPoint 這個方法，而且幾乎目前主流瀏覽器都支援，真是大大感動。