一日一技:在網頁上如何獲取滑鼠當前指向的元素

開發爬蟲的同學肯定用過 Chrome 開發者工具自動定位頁面元素對應的 HTML 標籤的功能，如下圖所示：

那麼有沒有同學思考過，這個功能，如果用 JavaScript 怎麼實現呢？

顯然，隨著滑鼠的移動，滑鼠指向的頁面元素是不斷變化的，我們需要知道滑鼠當前指向了哪一個頁面元素。

在 JavaScript 中，有一個函數叫做document.elementFromPoint(x, y)，輸入頁面坐標，返回該坐標上的頁面元素。而坐標可以通過滑鼠的事件來獲得。

於是，我們可以寫出如下的 JavaScript 代碼：

 function get_current_element(event){
        var x = event.clientX, y = event.clientY,
        element = document.elementFromPoint(x, y);
        return element
    }

function track_mouse(event){
        var elementMouseIsOver = get_current_element(event)
        console.log('當前滑鼠指向的元素是：', elementMouseIsOver)
    }

window.onmousemove = track_mouse
這樣，當滑鼠移動時，可以實時獲得當前滑鼠指向的元素。
但是，如果你直接使用上面的代碼，那麼你會被列印出來的信息刷屏，因為滑鼠一旦移動就會有數據列印出來。所以我們需要做一個限制，當滑鼠在元素內部移動的時候，不列印數據。track_mouse修改為：
var last_element = null
function track_mouse(event){
        var elementMouseIsOver = get_current_element(event)
        if (elementMouseIsOver === last_element) {
            return
        }
        console.log(elementMouseIsOver)
        last_element = elementMouseIsOver
    }
我們在 Chrome 的控制臺運行看看效果：
這樣直接列印元素可能不太好查看，我們再加個元素邊框的功能。增加兩個函數：
function highlight(element){
    element.style.outline = '#f00 solid 2px'
    }
function remove_hightlight(element){
        element.style.removeProperty('outline')
    }
修改track_mouse代碼為：
function track_mouse(event){
        var elementMouseIsOver = get_current_element(event)
        if (elementMouseIsOver === last_element) {
            return
        }
        if (last_element != null) {
            remove_hightlight(last_element)
        }
        highlight(elementMouseIsOver)
        last_element = elementMouseIsOver
    }
運行效果如下面的動圖所示。
有了這個功能以後，只要我們再稍稍修改一下代碼，就可以實現自動獲取滑鼠指向位置的 XPath 了。