react获取鼠标位置_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的上方或右方

}