兼容性写法获取鼠标坐标

TIGERB 发布于2019-08-26 17:04 / 448人阅读

摘要：事件发生时鼠标浏览器内容区域的坐标鼠标在屏幕上的坐标只有支持，相当于下的所能得到下面这种算法想要忽略滚动因素，获取相对于文档的坐标时，下支持与属性，这两个属性已经把滚动计算在内了。

首先：

先对比一下pagexX,clientX,screenX,offsetX几个的区别

pageX/pageY:鼠标相对于整个页面的X/Y坐标
整个页面：整个网页的全部，比如当网页很宽很长，宽2000px，高3000px, pageX/pageY的最大值就是他们。
ClientX/clientY :事件发生时鼠标浏览器内容区域的X/Y坐标
screenX/screenY:鼠标在屏幕上的坐标
offsetX/offsetY： 只有IE支持，相当于IE下的pageX,pageY

所能得到下面这种算法：
e.clientX+document.documentElement.scrollLeft- document.documentElement.clientLeft =e.pageX
e.clientY+document.documentElement.scrollTop-document.documentElement.clientTop = e.pageY

想要忽略滚动因素，获取相对于文档(body)的坐标时，
Firefox下支持pageX与pageY属性，这两个属性已经把滚动计算在内了。
Chrome下可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移，
IE下通过document.documentElement.scrollLeft,document.documentElement.scrollTop
所以综合Code如下：

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 };
   }
   var mousePos = getMousePos(event);
   console.log(mousePos.x,mousePos.y);

GPU云服务器云服务器获取鼠标坐标鼠标点击坐标 js 求鼠标当前坐标获取坐标

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110105.html

JavaScript 事件简介

摘要：事件流包括两种模式冒泡和捕获。和事件名，函数，此方法不支持仅仅支持两个参数事件名称事件回调。事件中没有这个属性。鼠标相对于事件源元素的左边界上边界坐标，只有事件有这个属性，标准事件没有对应的属性。事件事件的概念事件就是文档或浏览器窗口中发生的一些特定的交互瞬间【触发与响应】事件触发：用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等)...

makeFoxPlay 2019-08-02 14:04 评论0 收藏0
JavaScript 事件简介

摘要：事件流包括两种模式冒泡和捕获。和事件名，函数，此方法不支持仅仅支持两个参数事件名称事件回调。事件中没有这个属性。鼠标相对于事件源元素的左边界上边界坐标，只有事件有这个属性，标准事件没有对应的属性。事件事件的概念事件就是文档或浏览器窗口中发生的一些特定的交互瞬间【触发与响应】事件触发：用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等)...

Faremax 2019-08-23 14:35 评论0 收藏0
前端基础进阶（十）：面向对象实战之封装拖拽对象

摘要：前面几篇文章，我跟大家分享了的一些基础知识，这篇文章，将会进入第一个实战环节利用前面几章的所涉及到的知识，封装一个拖拽对象。不封装对象直接实现利用原生封装拖拽对象通过扩展来实现拖拽对象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面几篇文章，我跟大家分享了JavaScript的一些基础知识，这篇文章，...

Eidesen 2019-08-21 18:31 评论0 收藏0
JavaScript中的各种宽高以及位置总结

摘要：和这一对属性是用来读取元素的的宽度和高度的。第二部分对象在中，对于元素的运动的操作通常都会涉及到对象，而对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。文章转自中的各种宽高以及位置总结在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时...

microelec 2019-08-21 10:26 评论0 收藏0
浏览器兼容问题

摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。一、什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都...

wenshi11019 2019-08-26 13:57 评论0 收藏0