js实时获取鼠标所在坐标

作者: cbw100 | 来源:发表于2017-06-19 19:30 被阅读2427次

    有的时候我们希望实时获取鼠标所在的位置。
    为什么会用到它呢?
    可能你会遇到这样的情况,我们需要判断鼠标是不是在一个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的上方或右方
     }
    

    相关文章

      网友评论

        本文标题:js实时获取鼠标所在坐标

        本文链接:https://www.haomeiwen.com/subject/tlcuqxtx.html