clientX和clientY属性需要注意的地方
clientX和clientY为可视区鼠标的位置。
1. 随鼠标移动的div块[runjs]
当document有多个页面时,会出现问题。[runjs]
2. 解决方案:scrollTop, scrollLeft
需要注意scrollTop/scrollLeft的兼容性获取;
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
3. 封装getPosition()函数
function getPosition(event) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; return {x:event.clientX+scrollLeft, y:event.clientY+scrollTop};
}
clientX和clientY属性需要注意的地方的更多相关文章
- 一文看懂js中的clientX,clientY,pageX,pageY,screenX,screenY
一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们 ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- JS——事件详情(鼠标事件:clientX、clientY的用法)
鼠标位置 >可视区位置:clientX.clientY 跟着鼠标移动的div案例 代码如下图: 这个案例,运用到前一篇文章中的event事件来处理.获取div的left和top值,当鼠标移动 ...
- JavaScript 中事件对象参数:clientX、clientY、offsetX、offsetY、screenX、screenY
JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...
- 理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...
- JavaScript 中一些概念理解 :clientX、clientY、offsetX、offsetY、screenX、screenY
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...
- python 类属性 、实例属性,可变数据结构作为类属性需要注意的地方
1.一些经典的python错误不去阅读和不重视,就会把错误的做法带入到实际项目中来,甚至造成难以排查问题. 2.有一个大笨猪,按java写观察者模式,java写得是直接在类名下声明一个实例属性(不加s ...
- 结构体和类中属性定义需要static地方
private function Readxxx:Integer;static; public class property XXX:Integer read ReadXXx; Txxx =recor ...
- 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
随机推荐
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第一天Beta冲刺
这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 <做个一亿的小项目> 这个作业的目标 完成第一天Beta冲刺 作业正文 .. ...
- BZOJ 2882: 工艺 (SA/SAM/最小表示法)
我写的O(nlogn)O(nlogn)O(nlogn)的SA 8000ms 被 O(n)O(n)O(n)的SAM 2800ms 和 O(n)O(n)O(n)的最小表示法 500ms 头都锤爆- COD ...
- apache log4j将日志保存在mongodb数据库中(转)
og4j与mongodb整合 Mongo Java driver jar包 log4mongo-java jar包 配置log4j.properties文件,使之整合mongodb: #将Mongod ...
- gtid同步异常处理
gtid同步异常处理 分析出现问题时候GTID值 通过分析法获取gtid值 通过查看mysql> show slave status \G;查看一下信息并记录下来:Retrieved_Gtid_ ...
- java中的“指针”
java中的"指针" 通常我们说java中没有指针,但是java中的"引用"就相当于指针,只是不称为指针而已. 错误例子 public List<Clus ...
- 【Python之路】特别篇--Python文件操作
文件操作 open函数,该函数用于文件处理 操作文件时,一般需要经历如下步骤: (1)打开文件 (2)操作文件 一.打开文件 文件句柄 = open('文件路径', '模式','编码') 打开文件时, ...
- html5文件夹上传下载组件
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- java上传大文件解决方案
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在10G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以10G来进行限制. 第一步: 前端修改 由于项目使用的是BJ ...
- TTTTTTTTTTTTTTTTTTT UVA 2045 Richness of words
J - Richness of words Time Limit:500MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64 ...