js获取鼠标点击的位置实现思路及代码
更新时间：2014年05月09日 09:17:55 作者：
常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置，但仅使用这个方法是不够的，感兴趣的朋友可以了解本文
copy来的，但是原页面的代码还是需要修改，下面是修改可用的
常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置，但仅使用这个方法是不够的，因为event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的，而不考虑页面的滚动条所滚动的距离。
function pointerX(event)
{
return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
}
function pointerY(event)
{
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
}
两个方法分别获得相对整个页面(而不是屏幕)的鼠标位置
event.pageX是在FF中所支持的，这样就实现了跨浏览器操作
只需在其他方法中调用这两个函数就可
function getPointPosition(event)
{
var x_px_scr = event.clientX;
var y_px_scr = event.clientY;
alert("相对于当前屏幕的X轴偏移量" + x_px_scr);<span style="font-family: tahoma, helvetica, arial;">//相对于设备(PC或移动设备)</span>
alert("相对于当前屏幕的Y轴偏移量" + y_px_scr);//相对于设备(PC或移动设备)
var x_Px_page = pointerX(event);
var y_Px_page = pointerY(event);
alert("相对于整个页面的X轴偏移量" + x_Px_page); //相对于浏览器
alert("相对于整个页面的Y轴偏移量" + y_Px_page); //相对于浏览器
}
常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置，但仅使用这个方法是不够的，因为event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的，而不考虑页面的滚动条所滚动的距离。
复制代码 代码如下:
function pointerX(event)
{
return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
}
function pointerY(event)
{
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
}
两个方法分别获得相对整个页面(而不是屏幕)的鼠标位置
event.pageX是在FF中所支持的，这样就实现了跨浏览器操作
只需在其他方法中调用这两个函数就可
复制代码 代码如下:
function getPointPosition(event)
{
var x_px_scr = event.clientX;
var y_px_scr = event.clientY;
alert("相对于当前屏幕的X轴偏移量" + x_px_scr);<span style="font-family: tahoma, helvetica, arial;">//相对于设备(PC或移动设备)</span>
alert("相对于当前屏幕的Y轴偏移量" + y_px_scr);//相对于设备(PC或移动设备)
var x_Px_page = pointerX(event);
var y_Px_page = pointerY(event);
alert("相对于整个页面的X轴偏移量" + x_Px_page); //相对于浏览器
alert("相对于整个页面的Y轴偏移量" + y_Px_page); //相对于浏览器
}
相关文章
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。2010-05-05
这篇文章主要为大家详细介绍了JS二分查找算法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
Maps Javascript...2007-01-01
这篇文章主要介绍了js如何实现元素曝光上报，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了如何使用JavaScript打造惊艳打字机效果,让你的文字生动跃动,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要给大家介绍了关于JavaScript继承的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要为大家详细介绍了javascript异步编程，其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题，感兴趣的小伙伴们可以参考一下2016-02-02
微信小程序template模板与component组件的区别和使用详解
这篇文章主要介绍了微信小程序template模板与component组件的区别和使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
下面小编就为大家带来一篇使用Math.max,Math.min获取数组中的最值实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇文章的主要内容包括高级动画、像素操作、性能优化等知识点，讲解每个知识点的同时还会有一些酷炫的demo。下面跟着小编一起来看下吧2016-12-12
最新评论