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的上方或右方
 }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,408评论 0 8
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,655评论 0 106
  • 文:周曾玥 图:周曾玥 2017.8.3 B组 走在街上,看着人群来来往往,看着那些佛教徒磕着长头,看着他们手上的...
    Oneworld阅读 2,599评论 0 9