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操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
随机推荐
- dedecms织梦系统后台验证码图片不显示的解决方法
网站迁移后,dedecms织梦系统后台验证码图片不显示的解决方法通用解决方案-取消后台验证码功能因为没有验证码,不能进后台,所以修改php文件源代码:方法一:打开dede/login.php 找到如下 ...
- libusb传输endpoint描述符
至于endpoint描述符,它是属于设置的,每个设置都会有endpoint描述符,也就是每个接口的设置都表示一种功能,既然是实现了功能,那就必须通过endpoint来传输数据,那到底是用到了几个end ...
- dsoframer控件注册,解注册和检查注册情况
public class DsoframerHelper { private static string dsoframerPath = System.Windows.Forms.Applicat ...
- mysql 命令行导出导入数据
导出数据库(sql脚本) mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u root -p --databases db_name > test ...
- React全家桶构建一款Web音乐App实战(六):排行榜及歌曲本地持久化
上一节使用Redux管理歌曲相关数据,实现核心播放功能,播放功能是本项目最复杂的一个功能,涉及各个组件之间的数据交互,播放逻辑控制.这一节继续开发排行榜列表和排行榜详情,以及把播放歌曲和播放歌曲列表的 ...
- python3安装模块,摘自网上
配置好Python3.6和pip3安装EPEL和IUS软件源 yum install epel-release -y yum install https://centos7.iuscommunity. ...
- CTreeItem保存和获取数据
保存数据: std::string val = "test data"; CString* pNodeData = new CString; *pNodeData = val.c_ ...
- VUE路由过度效果vs缓存
app页面 router.js
- linux命令系列
Linux系统安装node linux安装rz sz命令:yum install lrzsz上传tar包:rz node-v10.15.0-linux-x64.tar.xz将tar包移到上一级目录下: ...
- CSS3选择器:nth-child和:nth-of-type的差异
p:nth-child(2)表示这个元素要是p标签,且是第二个子元素,是两个必须满足的条件. <section> <div>我是一个普通的div标签</div> & ...