js获取鼠标点击的位置实现思路及代码

前端技术 2023/09/09 JavaScript
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); //相对于浏览器
}

本文地址：https://www.stayed.cn/item/24709

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案