源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-5-9 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); //相对于浏览器
}
回复

使用道具 举报

2

主题

2万

回帖

380

积分

中级会员

Rank: 3Rank: 3

积分
380
发表于 2022-8-19 12:30:29 | 显示全部楼层
iiguuubhuiuihu
回复 支持 反对

使用道具 举报

14

主题

1万

回帖

75

积分

注册会员

Rank: 2

积分
75
发表于 2022-10-12 17:43:34 | 显示全部楼层
很不错的样子
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

247

积分

中级会员

Rank: 3Rank: 3

积分
247
发表于 2022-12-17 08:00:55 | 显示全部楼层
抽根烟,下来看看再说
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

321

积分

中级会员

Rank: 3Rank: 3

积分
321
发表于 2022-12-28 04:20:55 | 显示全部楼层
人都不在了啊 啊
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2023-4-10 05:25:44 | 显示全部楼层
554411515451555
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-8 18:16:33 | 显示全部楼层
看看怎么样再说
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2023-10-10 07:20:22 | 显示全部楼层
哦哦哦ijhhsdj
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-23 15:49:51 | 显示全部楼层
来看看!!!
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

347

积分

中级会员

Rank: 3Rank: 3

积分
347
发表于 2024-5-3 16:04:38 | 显示全部楼层
啦啦啦啦啦啦哈哈哈
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-2-5 02:37 , Processed in 0.190994 second(s), 41 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表