脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

浏览器能获取到坐标的属性总共以下五种">关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种

event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变
兼容性：所有浏览器均支持

pageX/Y:

pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变

设置让页面滚动，发现clientX与pageX的值不一样

兼容性：除IE6/7/8不支持外，其余浏览器均支持。

offsetX/Y:

offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。
兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持
　
###　 layerX/Y:
layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为posITion:relative或者position:absolute，否则会返回相对htML文档区域左上角的距离
兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

　screenX/Y:

　screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变

　兼容性：所有浏览器均支持

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y全部内容，希望文章能够帮你解决javascript代码实例教程-原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。