专栏首页工作笔记精华JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.

之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反正看完一头雾水,所以自己动手亲自测试了一下;说一下自己的理解;clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性,所以必然是“鼠标事件”发生时候才会有意义;

clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置;
clientY:当鼠标事件发生时,鼠标相对于浏览器(这里说的是浏览器的有效区域)y轴的位置;
screenX:当鼠标事件发生时,鼠标相对于显示器屏幕x轴的位置;
screenY:当鼠标事件发生时,鼠标相对于显示器屏幕y轴的位置;
offsetX:当鼠标事件发生时,鼠标相对于事件源x轴的位置
offsetY:当鼠标事件发生时,鼠标相对于事件源y轴的位置

下面我将结合我的测试代码和结果对上面的话进行解释

这是我写的测试例子的html代码

<body>
<span style="white-space:pre">	</span><div id="div" class="container"></div>
<span style="white-space:pre">	</span><!--<div id="div1" class="container"></div>
<span style="white-space:pre">	</span><input type="button" value="test" οnclick="test();">-->
</body>

添加一点样式

  <style>
 
*{padding: 0;margin: 0;}
 
.container{
 
width: 200px;height: 100px;
 
border: 1px solid #c00;
 
}
 
input[type="button"]{
 
margin: 50px;
 
border: none;
 
width: 100px;height: 50px;background: green;
 
}
 
</style>
 

接下来是js部分的代码

<script>
 
document.onmousemove = function (ev) {
 
var e = ev || window.event;
 
var div = document.getElementById('div');
 
div.innerHTML = "clientX: "+e.clientX + ",clientY:"+ e.clientY +
 
"</br> screenX:"+ e.screenX+",screenY:" + e.screenY;
 
}
 
 
 
/* function test(ev) {
 
var e = ev || window.event;
 
var div1 = document.getElementById('div1');
 
div1.innerHTML = "offsetX:"+ e.offsetX +",offsetY : "+ e.offsetY;
 
}*/
 
</script> 

这里我需要解释一下我上面说的“浏览器有效区域”这句话,下图中黑色边框区域就是浏览器的有效区域,而整个图片显示的区域就是 “显示器屏幕区域”

下图可以看到当鼠标移动事件onmousemove发生的时候,在id为div的里面显示clientX,clientY,screenX,screenY,的值;

当我的鼠标放到浏览器有效区域的 0 ,0 处,clientX为0,clientY为0;

而screenX为0,screenY为85,因为鼠标在“浏览器有效区域”里的x坐标就是0,y坐标也是0,而鼠标在“显示器屏幕区域”的x坐标是0,y坐标是85px

当我把鼠标移到div的右上角的时候,clientX为200,clientY为0;

screenX为200,screenY为85,由此可知道

clientX是鼠标相对以浏览器有效区域的的X轴坐标,

clientY是鼠标相对以浏览器有效区域的的Y轴坐标,

上图中我的鼠标在浏览器有效区域里 的x坐标是200px,y坐标是0;而screenX,screenY则是相对以整个显示屏幕区域而言的。

上图中 相对于“整个显示屏幕区域而言” 鼠标的x坐标是200px,y坐标是85px,所以screenX和screenY正是获取这两个值,所以screenX是200px,screenY是85px

当我的鼠标移动到div的右下角的时候,screeX是200px,screenY是185px,因为div本身的宽度我定义的时200px,高度100px;

接下来说一说offsetX和offsetY属性

offsetX :当鼠标事件发生时,鼠标相对于事件源x轴的位置

offsetY:当鼠标事件发生时,鼠标相对于事件源y轴的位置

当我们点击test按钮的时候触发onclick事件,这里test这个按钮就是事件源,所以通过offsetX和offsetY获取的坐标值就是相对于 test按钮这个事件源的;

Test按钮自身的宽100px高50px;为了容易理解,我特意给按钮添加个margin:50px让大家看得效果明显一些;

第一次鼠标是在接近test按钮的左上角点击

相信看到这里应该能明白offsetX和offsetY是获取的什么值了吧,获取的就是鼠标相对test这个按钮的x坐标和y坐标

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jedis操作Lua脚本测试

    stys35
  • SQLAlchemy - Column详解

    过滤是数据  提取的一个很重要的功能,以下对一些常用的过滤条件进行详解,并且这些过滤条件都是只能通过filter方法实现的:

    stys35
  • div实现绑定按键事件 转

    所有的页面都会引用一个公共js代码库base.js,在这个代码库里为document绑定了按键事件,现在需要为某个特殊的custom.html页面定制事件han...

    stys35
  • CSS:模拟Windows窗口及DIV居中

      利用CSS,尝试做了一个仿Windows窗口的横向纵向均居中的Div效果:   以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3...

    小李刀刀
  • [小程序]小程序框架的简单页面布局

    6.最下面的文字靠右,view相当于一个块元素,设定宽度后,text-align右对齐

    陶士涵
  • 小程序 — scroll-view组件实现滚动

    (1)当然,关于scroll-view组件官网还提供了许多其它的属性和事件方法,大家仔细去看看:

    Ewall
  • Python/Django 生成二维码

    kirin
  • Flink 自定义 countAndTimeTrigger

    项目中需要自定义 trigger,需要基于两个条件:1. count 即 msg 的个数,当个数大于某个数时触发窗口 2. time 即每个固定的时间触发窗口

    shengjk1
  • java 开发 face++ 人脸特征识别系统

    首先要在 face++ 注册一个账号,并且创建一个应用,拿到 api key 和 api secret;

    Krry
  • 聊聊flink的Triggers

    flink-streaming-java_2.11-1.7.0-sources.jar!/org/apache/flink/streaming/api/wind...

    codecraft

扫码关注云+社区

领取腾讯云代金券