1. 程式人生 > >js實時獲取滑鼠所在座標

js實時獲取滑鼠所在座標

有的時候我們希望實時獲取滑鼠所在的位置。
為什麼會用到它呢?
可能你會遇到這樣的情況,我們需要判斷滑鼠是不是在一個dom元素的上、下、左、右的位置,至於是不是在元素上,就不需要通過獲取位置了,你可以直接用hover來判斷就好了。
那麼如何實現獲取滑鼠所在位置呢 ?

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement
.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; return { 'x': x, 'y': y }; }

接下來呢,再做一點擴充套件,沿著上述問題的引入,假如我需要判斷滑鼠是否在dom元素#target的上方或者右方呢?

 var target_position = $('#target').offset();
 var top = target_position.top;//計算target的top
var left = target_position.left;//計算target的left var left_side = left + $('#target').width();//計算target的寬度,這是因為我要判斷的滑鼠位置可能位於target的右方,如果是左方,則無需left_side,left就好 var hand_position = getMousePos(e); var y = hand_position.y; var x = hand_position.x; if(top > y || left_side < x){ //此時滑鼠位於target的上方或右方
}