专栏首页大道七哥javascript坐标:event.x、event.clientX、event.offsetX、event.screenX 用法

javascript坐标:event.x、event.clientX、event.offsetX、event.screenX 用法

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标,event.X也一样。但是如果设置事件对象的定位属性值为relative,event.clientX不变,而event.X返回事件对象的相对于本体的坐标。

代码如下

<script>

var strInfo="";

strInfo+="rn网页可见区域宽:"+document.body.clientWidth;

strInfo+="rn网页可见区域高:"+document.body.clientHeight;

strInfo+="rn网页可见区域宽:"+document.body.offsetWidth+"(包括边线的宽)";

strInfo+="rn网页可见区域高:"+document.body.offsetHeight+"(包括边线的宽)";

strInfo+="rn网页正文全文宽:"+document.body.scrollWidth;

strInfo+="rn网页正文全文高:"+document.body.scrollHeight;

strInfo+="rn网页被卷去的高:"+document.body.scrollTop;

strInfo+="rn网页被卷去的左:"+document.body.scrollLeft;

strInfo+="rn网页正文部分上:"+window.screenTop;

strInfo+="rn网页正文部分左:"+window.screenLeft;

strInfo+="rn屏幕分辨率的高:"+window.screen.height;

strInfo+="rn屏幕分辨率的宽:"+window.screen.width;

strInfo+="rn屏幕可用工作区高度:"+window.screen.availHeight;

strInfo+="rn屏幕可用工作区宽度:"+window.screen.availWidth;

window.confirm(strInfo);

</script>

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。

clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。

offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。

screenX:相对于用户屏幕

代码如下

<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">

<tr><td>

<div onclick="show()" style="background:silver;cursor:hand">

Click here to show.

</div>

</td></tr>

</table>

<script>

function show(){

alert("window.event.x:"+window.event.x+"nwindow.event.y:"+window.event.y+"nevent.clientX:"+event.clientX+"nevent.clientY:"+event.clientY+"nevent.offsetX:"+event.offsetX+"nevent.offsetY:"+event.offsetY+"nwindow.event.screenX:"+window.event.screenX+"nwindow.event.screenY:"+window.event.screenY);

}

</script>

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标

event.X也一样

但是如果设置事件对象的定位属性值为relative

event.clientX不变

而event.X返回事件对象的相对于本体的坐标

event对象详解 ICOOE 2000.3.31 http://www.hzhuti.com

event代表事件的状态,例如事件发生的的元素、鼠标的位置等等,event对象只在事件过程中才有效。

event属性:

altKey

检索ALT键的当前状态

可能的值 true为关闭

false为不关闭

button

检索按下的鼠标键

可能的值: 0 没按键

1 按左键

2 按右键

3 按左右键

4 按中间键

5 按左键和中间键

6 按右键和中间键

7 按所有的键

cancelBubble

设置或检索当前事件是否将事件句柄起泡

可能的值: false 启用起泡

true 取消该事件起泡

clientX

检索与窗口客户区域有关的鼠标光标的X坐标,属性为只读,没有默认值。

clientY

检索与窗口客户区域有关的鼠标光标的Y坐标,属性为只读,没有默认值。

ctrlKey

ctrlKey 检索CTRL键的当前状态

可能的值 true为关闭

false为不关闭

dataFld

检索被oncellchange事伯影响的列

aTransfer

为拖放操作提供预先定义的剪贴板式。

Element

检索在on mouseover和on mouseout事件期间退出的对象指针

keyCode

设置或检索与引发事件的关键字相关联的Unicode关键字代码

该属性与onkeydown onkeyup onkeypress一起使用

如果没有引发事件的关键字,则该值为0

offsetX

检索与触发事件的对象相关的鼠标位置的水平坐标

offsetY

检索与触发事件的对象相关的鼠标位置的垂直坐标

propertyName

检索在对象上己更改的特性的名称

reason

检索数据源对象数据传输的结果

可能的值:

0 数据传输成功

1 数据传输失败

2 数据传输错误

recordset

检索数据源对象中默认记录集的引用

该特性为只读

repeat

检索一个事件是否被重复

该属性只有在onkeydown事件重复时才返回true

returnvalues

设置或检索从事件中返回的值

可能的值:

true 事件中的值被返回

false 源对象上事件的默认操作被取消

screenX

检索与用户屏相关的鼠标的水平位置

screenY

检索与用户屏相关的鼠标的垂直位置

shiftKey

检索shiftKey键的当前状态

可能的值 true为关闭

false为不关闭

srcElement

检索触发事件的对象

srcFilter

检索导致onfilterchange事件触发的过滤器对象

srcUm

检索触发事件行为的同一资源名称

除非下面两个条件都为真,否则该特性被设置为null

1.行为被附加到触发事件的要素上

2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件

toElement

检索作为on mouseover或者on mouseout事件结果而移动的对象

type

检索事件对象中的事件名称

x

检索相对于父要素鼠标水平坐标的整数

y

检索相对于父要素鼠标垂直坐标的整数


-END-

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 图形数据库Neo4j基本了解

    原文出处:http://www.yund.tech/zdetail.html?type=1&id=f519df57f29b22863d2a6a79326bd22...

    大道七哥
  • 在Windows环境中安装Neo4j

    图形数据库(Graph Database)是NoSQL数据库家族中特殊的存在,用于存储丰富的关系数据,Neo4j 是目前最流行的图形数据库,支持完整的事务,在属...

    大道七哥
  • Hadoop(八)Java程序访问HDFS集群中数据块与查看文件系统

      我们知道HDFS集群中,所有的文件都是存放在DN的数据块中的。那我们该怎么去查看数据块的相关属性的呢?这就是我今天分享的内容了

    大道七哥
  • Python读取大文件的"坑“与内存占用检测

    随手搜索python读写文件的教程,很经常看到read()与readlines()这对函数。所以我们会常常看到如下代码:

    HappenLee
  • 标签制作软件如何制作1行多列的标签

    在使用标签制作软件制作标签时,我们需要根据标签纸的实际尺寸在标签软件中进行设置。因为只有将标签纸的实际尺寸跟标签软件中的纸张尺寸设置成一致的,才能打印到相应的纸...

    用户5746110
  • 【Skill】开箱一只240元的硅脂 – 小米Air13硅脂更换记

    今天给大家开箱一只价值240块的硅脂 为什么这只硅脂这么贵呢 慢慢看下去吧 说多了都是泪

    Hyejeong小DD
  • AI能拯救陷入泥沼的互联网招聘吗?

    在招聘网站网页上,我们经常看到“迈出你的第一步!不惧困难,不怕拒绝!去相信,去证明,梦想一触即发!高薪不是幻影,只要你愿意!还在等什么?”等励志的标语。事实上,...

    企鹅号小编
  • Spark 内存管理的前世今生(下)

    在《Spark 内存管理的前世今生(上)》中,我们介绍了 UnifiedMemoryManager 是如何管理内存的。然而,UnifiedMemoryManag...

    codingforfun
  • 【2020HBU天梯赛训练】7-29 集合相似度

    给定两个整数集合,它们的相似度定义为:N​c​​/N​t​​×100%。其中N​c​​是两个集合都有的不相等整数的个数,N​t​​是两个集合一共有的不相等整数的...

    韩旭051
  • Windows10快速启动原理和如何关闭

    Windows10快速启动称为混合启动(HybridBoot),在Windows8操作系统就引入了这个功能:

    砸漏

扫码关注云+社区

领取腾讯云代金券