跳到主要內容

[分享] 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 這個方法,而且幾乎目前主流瀏覽器都支援,真是大大感動。

留言

這個網誌中的熱門文章

面試者如何挑戰大工程師時代來臨?

面試者如何挑戰大工程師時代來臨? 全世界都在倡導轉職成為工程師,似乎轉職成為工程師就成為職場的救贖,真的是如此嗎?讓老衲來杠給各位聽。 最近有位好久不見的小朋友,是 2000 年出生的小蔡,對於即將面臨到面對職場的挑戰開始關心起技術,他開始尋找比較適合自己的領域,同時也開始在思考到底為了接下來的就職小蔡該如何準備。 詢問我說是不是可以考慮軟體開發工程師這條路線 對於他的詢問,反而引起我的注意, 這讓我開始思考並映射於最近招募的經驗,軟體開發此領域是不是對於每個人都是可以擔任的職啀,這邊分享一些自己的看法希望對各位有所幫助。 全民工程師這件事情 在全球景氣低迷的狀況下,的確特別在這一年大家會很有感覺萬物齊漲,薪水不漲,薪資就是一直停滯不前。 很多時候,在不同的領域中,會發現整個薪資就算是擔任了管理職務主管你也會面臨到薪資的強大屏障在自己面前。 這個時候, 軟體工程師年薪百萬口號 似乎就成了一種救贖。 好像成為了工程師就可以達到年薪百萬,在家輕鬆工作,不用打卡也不用受到風吹雨淋,隨時想工作就可以工作,每個月又有固定薪水入帳,感受到類財富自由,人生的美好。 如果能夠爭取到跨國公司的職位,這份薪水有可能還可以上看每個月十多萬以上,甚至是往上也是極度有可能的事情,人生美好層次又再度提高了起來。 但這件事情是真的每個人都可以達到嗎? 還是這就是另外一種性存者偏差呢? 亦或者這些人其實是金字塔頂端的小眾? 每份履歷都像是同一種履歷 最近在最近幾年在面試工程師的時候特別會看到許多轉職者,一開始履歷裡面看到相關的作品一開始會覺得十分的驚艷, Wow, 現在的新手就可以做到如此精美的畫面,這些畫面是我當初用 Bootstrap 也做不出來的東西,許多的互動體驗好的一個不行,做出來的頁面配色和對齊也是極致。 但是隨著時間推移,多看了幾封履歷之後,就會發現在各大技術養成學院出來的學生履歷成果內容如出一轍,在面試的過程中也會詢問許多關於框架的底層概念,和比較技術觀念的時候,甚至是許多框架的核心概念,就很容易露出馬腳。 很多面試者會 一問三不知 ,透過許多引導,但殘酷的是連關鍵字是什麼都也無法推敲出來,更不用說在小組裡面到底怎麼樣合作,許多不同線上產品的比較,使用者流程,使用者後面的互動邏輯等,幾乎是風吹一片倒,只能

工程師跨越管理的第一道牆 - 放下

越來越複雜的網路應用 2022 年,網路應用越來越複雜,表層是 社群服務 ,轉頭看是 廣告服務 ,詳細看是 個資儲存庫 ,如此複雜的應用,如此眼花撩亂的系統架構, 現代的軟體開發已經從打個人戰,進入到團體戰鬥的打法。 打群架的時代 現在的許多產業,都在徵求軟體工程師,通常是徵求多位,以往以少少數量完成應用服務的時代已經過去。 現代已經是打群架的年代,前端至少一位,後端至少一位,系統管理,雲端管理等,這些都是在軟體公司內具備的職缺,已經很難回到那一人打天下的時代。 因此,誰能夠在技術領域中讓多種面向職能的人,互相進行協作,互相進行工作分配,將產品進度維持穩定產出,這樣的角色變得至關重要。 而通常,除了外部尋找此職能之外,這樣的職位,會以團隊中,最有技術力,且最能夠經常解決問題的人做為代表人。 帶領的第一課 - 『 放下』 相信大家都一定有聽過 彼得原理(Peter Principle) , 因其某種特質或特殊技能,令他被擢升到不能勝任的高階職 位,最終變成組織的障礙物 能力越強的人,通常被拔擢的越快,隨著職位的提升,也越發現能力的不適,而這問題在技術管理職位上特別常見。 因此,技術管理的第一堂課,要跟特別提醒的點是『放下』,特別是要放下自己的技術。 這可能與常理有所違背,為何會讓一個技術最強的人,去放棄他本身的技術呢? 放下的定義 放下,並不是要你放棄,癱軟在辦公室的椅子上什麼都不做,也不是讓你就捨棄掉對於技術的熱情,讓自己故步自封。 放下技術,是放下自己對於任何一種技術的直覺反應,本位思考,我們是否曾經聽過這種話 『如果是我來做,兩小時就可以完成了』 , 『這個很簡單,改一下就好了』 。 但今天,做的人不是你, 你已經進入管理者的角色 ,你已經被賦予 帶領的職能 ,帶領才是你該做的事情。 這時候如果以自己過往的 『經驗,效率,能力』 來看待 『他人』 的執行步驟及過程,會發現所有事情都如此的格格不入。 此時,你需要就是 『放下』 適當的放下自身技術能力 我們可能是因為自己曾經努力過,也可能自己剛好在那個時代,也可能是因為自己比較幸運,不論是哪一種可能,就是這麼剛好的在這個時間點成為 『帶人的那個人』 當我們用自己的眼光去看待所有人,看待所有新鮮人,就如同開著跑車去嘲笑騎摩托車的人不努

淺談 AI 落地到底有多難 - 以 OpenAI ChatGPT 為例

在 目前待領的團隊 ,小弟有幸 參與到 AI 落地的過程 ,之前也參與過幾次 AI 服務導入的和製作出 AI 產品應用的經驗,這邊就提出些簡單分享,跟大家說說,為何 AI 落地有這麼難 ChatGPT 幾乎成為這幾天大家刷版面的資訊,官方網站其實有提到 Chat-GPT 的參考模式是怎麼進行的,也有提供相關的論文參考, https://openai.com/blog/chatgpt/ ChatGPT 幾乎成為現象級的影響 如果你還沒試用過,我建議你真的玩玩看, https://chat.openai.com/chat 在 AI 落地的階段,有許多工程的過程,還有許多現實需要面對,而這煉成的過程都很容易導致 AI 落地失敗, 更不用說像是 ChatGPT 這種十年磨一劍的應用服務,為什麼驚艷, 中英文,簡中繁中等均能 80% 的機率識別問題及主題對話 回應內容,英文的部分不意外的通順,簡中繁中的部分有些詞語是有做過調整的,這實屬難得。 對於資料上下文關聯度,以及變化形式在主題式的發展下均能有效地回應且呈現。 呈現格式可以以『摘要、表格、條列』等方式進行規劃,同時也可以對文字內容進行一定程度的擴張和收斂。 而要做到這些事情,除了大家所熟知的需要不斷的生成模型,訓練模型,不同的模型疊加上去之外。 同時最難也是最複雜的部分, 『資料工程的處理』 AI 工程的開始 在我們使用任何一套 AI 框架 Tensorflow / pytorch 之後,無一例外地就會以特定問題解決方案,開始採用不同的現成 Model 進行驗證,在一開始對於初始的 example data / init data 都會有不錯的反應。 接下來問題開始... 當我們天馬行空的,不斷將例外,將特定領域情境涵蓋進去的時候,你就會發現這 model 的準確率下降,接下來就是一連串調整參數的開始, 或者是開始進行特例發想的部分,哪些資料是需要踢除的,哪些項目是需要先排開的,哪些資料是對於訓練本身是有影響的,在這個過程中就已經進入 data engineering 的環節中。 source from 資料科學家的工作日常 資料工程的處理 大家所想像的,在建立模型的時候似乎就是不斷地調參數,不斷的運作程式,但在這之前,有 『好多好多好多好多』