clientX offsetX sreenX

最新推荐文章于 2022-07-06 19:17:53 发布
最新推荐文章于 2022-07-06 19:17:53 发布
阅读量311 收藏
点赞数

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

============================================================================

code:

-------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY οnclick='test()' style="margin:0 0 0 0">
clientX=<INPUT TYPE="text" NAME="x1">
clientY=<INPUT TYPE="text" NAME="x2"><br/>
设置或获取鼠标指针位置相对于窗口客户区域的 xy 坐标，其中客户区域不包括窗口自身的控件和滚动条。 <br/>
offsetX =<INPUT TYPE="text" NAME="x3">
offsetY =<INPUT TYPE="text" NAME="x4"><br/>
设置或获取鼠标指针位置相对于触发事件的对象的 xy 坐标。 <br/>
screenX =<INPUT TYPE="text" NAME="x5">
screenY =<INPUT TYPE="text" NAME="x6"><br/>设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标<br/>
x=<INPUT TYPE="text" NAME="x7">
y=<INPUT TYPE="text" NAME="x8">设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
<TABLE width=400 height=500 border=1 style="border-style:none" CELLPADDING=0 CELLSPACING=0 οnclick='test()'>
<TR>
<TD>a</TD>
<TD>b</TD>
</TR>
<TR>
<TD>c</TD>
<TD>d</TD>
</TR>
</TABLE>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test(){
document.all.x1.value=event.clientX;
document.all.x2.value=event.clientY;
document.all.x3.value=event.offsetX;
document.all.x4.value=event.offsetY;
document.all.x5.value=event.screenX;
document.all.x6.value=event.screenY;
document.all.x7.value=event.x;
document.all.x8.value=event.y;
}
//-->
</SCRIPT>

ytlizhen1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2544
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
彻底搞懂 offsetX、scrollX、clientX 的区别
lefex的博客
03-05 1万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 1699
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?
DavidMen的专栏
09-10 1292
event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?2007-10-10 17:41clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offset
区分event对象中的[clientX,offsetX,screenX,pageX]
嘿嘿
07-06 892
前言 在平时的开发中，非常讨厌的就是兼容性了，兼容性的问题总会让我们记忆混淆，所以这次来区分一下event对象中的常用获取鼠标位置。 clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 offse
event.x,event.clientX,event.offsetX区别
01-19
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <...
event.X和event.clientX的区别分析
09-05
解释一下event.X和event.clientX有什么区别？event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样但是如果设置事件对象的定位属性值为relative
offsetLeft与clientX的含义1
08-08
HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像
JS 中clientX clientY offsetX offsetY 等属性说明
小火车况且况且况且的博客
10-29 3554
CSS 中clientX clientY offsetX offsetY 等属性说明 示意图 event.clientX, event.clientY : 鼠标点击的位置距离 body 的大小 event.screenX, event.screenY : 鼠标点击的位置距离 屏幕 的大小 event.offsetX, event.offsetY 鼠标点击的位置距离 div盒子 的大小 没有...
【javascript坐标】——event.x、event.clientX、event.offsetX、event.screenX 用法
严文文 Chris
07-04 1778
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠...
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 7610
鼠标事件（e=e||window.event） event.clientX、event.clientY (相对浏览器窗口) //鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 function getMousePos(event) { var e = event || window.event; return {'x':e.clientX,'y':clientY} } clientX与client..
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 6554
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解
lwx931449660的博客
05-12 1211
offset offsetX、offsetY为当前鼠标点击位置距离当前元素参考原点（左上角）的距离，而不同浏览器参考原点的位置不尽相同，FF及Chrome中参考原点为内容区域左上角，不包含元素边框 offsetX 鼠标当前点击位置距离当前点击元素内容区域最左边（不包含边框）的距离 offsetY 鼠标当前点击位置距离当前点击元素内容区域最上边（不包含边框）的距离 点击不同位置，参考原点不同，则距离不同 以下四个点可供理解offset的相对位置及尺寸 client...
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
深刻认识clientX，offsetX，screenX
weinideai的专栏
02-13 1万+
概念（来源于网络）：clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 scre
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
热门推荐
每天进步一点点
05-09 6万+
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性， 之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解； clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY
蒲公英芽的博客
01-06 2万+
MouseEvent的类别有以下： mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过 mouseout 鼠标滑出 mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单 注意： 执行顺序：mousedown —&g...
jquery().offset()、e.offsetX、e.clientX
rihongliu的专栏
09-29 1843
$(function(){ //$("#inner").html($("#inner").offset().left + ",,," + $("#inner").offset().top) ; //$("#inner").html($("#inner").client().left + ",,," + $("#inner").offset().top) ;
offsetx,clientx,pagex
最新发布
03-17
offsetX，clientX 和 pageX 都是 JavaScript 中用于获取鼠标相对于文档的坐标的属性。 offsetX：是鼠标相对于当前元素的左边界的水平距离。 clientX：是鼠标相对于浏览器窗口的左边界的水平距离。 pageX：是鼠标...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值