1  pagex/pagey:鼠标相对于整个页面的x/y坐标 注:整个页面的意思就是你整个页面的全部 例如:宽200px 高400px 那么pagex/y他们最大值就是它

2,offsetX/y与pageX/Y结果都一样,但是前者只有IE支持后者IE不支持

3,screenx/y 鼠标在屏幕上的坐标,最大值不会超过屏幕分辨率

4,clientX/y 事件发生时鼠标在浏览器内容区域的x/y坐标(不含滚动条),相对于可视区域的坐标 注:滚动的时候看到的区域不算,当你将浏览器窗口缩小时,它们的最大值也会缩小 但最终最大值不会超过浏览器的可视区域

我们在这里就不写代码了,直接画一张图来说明他们几者的关系,来上图

今天就到这里,下次我们写个选项卡,在网站中选项卡也是挺重要的

pagex/y offsetx/y screenx/y clientx/y 用法及区别的更多相关文章

  1. clientX, clientY，offsetX, offsetY,screenX, screenY, x, y

    clientX, clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0: offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置,当 ...

  2. clientX、pageX、offsetX、screenX的区别

    这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...

  3. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

  4. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  5. clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y ,offsetTop,offsetLeft 详解

    clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距 ...

  6. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  7. clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  8. pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

    event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...

  9. 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

    鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 ...

随机推荐

  1. AJAX方法讲解

    Ajax的方法讲解 Ajax 异步请求,有点: 调高用户的体验度, 降低网络传输量 $.load() //异步加载页面 $.post()  Post 异步请求 $.post("url请求地址 ...

  2. 用ASPOSE.Cells将HTML表格存为Excel

    前端生成的html表格经常需要导出到excel中,利用JS和Office控件可以做到,但仅限于IE,还要启用安全设置. 想找一个简单的办法将HTML内容直接转换成Excel文件,如果直接修改网页头信息 ...

  3. Coroutines declared with async/await syntax is the preferred way of writing asyncio applications. For example, the following snippet of code (requires Python 3.7+) prints “hello”, waits 1 second, and

    小结: 1.异步io  协程 Coroutines and Tasks — Python 3.7.3 documentation https://docs.python.org/3/library/a ...

  4. laravel使用记录

    引用外部文件方式参考地址:https://blog.csdn.net/Darry_Zhao/article/details/52689635 跟踪数据库执行语句 DB::enableQueryLog( ...

  5. Qt自定义界面

    https://blog.csdn.net/zhangxiaoyu_sy/article/details/78925221

  6. 20190412 T-SQL语言二

    Use xsxk;WITH c_count(id,xb,rs)AS (SELECT 班级,性别,count(*)FROM XS GROUP BY 班级,性别 ) SELECT * FROM c_cou ...

  7. MySQL行转列与列转行

    行转列 例如:把图1转换成图2结果展示 图1 图2 CREATE TABLE `TEST_TB_GRADE` ( `ID` ) NOT NULL AUTO_INCREMENT, `) DEFAULT ...

  8. POI大数据Excel生成

    package com.hd.erpreport.controller; import java.io.File; import java.io.FileOutputStream; import ja ...

  9. centos7.5图形界面与命令行界面转换

    查看当前状态下的显示模式: # systemctl get-default 转换为图形界面: # systemctl set-default graphical.target 转换为命令行界面: # ...

  10. Qt 拷贝内容到粘贴板 || 获取粘贴板内容

    QString source = ui->textEdit_code->toPlainText(); QClipboard *clipboard = QApplication::clipb ...