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操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
随机推荐
- Blend Visual studio 和Visual studio 的区别
blend for visual studio 这个并不是用于开发中写代码的,而是专门用来做WPF的界面设计的.这是为了让专业的人做专业的事,尽量让写代码的人只使用visual studio,而做界面 ...
- FutureWarning: get_value is deprecated and will be removed in a future release. Please use .at[] or .iat[] accessors instead print(labels_df.get_value(patients,col=1))
这是因为pandas的版本高了,0.21之后就已经将这个方法干掉了.直接装成0.20之前的就好
- mac 环境下Android 反编译源码
mac环境下Android 反编译 一.需要的工具 apktool:反编译APK文件,得到classes.dex文件,同时也能获取到资源文件以及布局文件. dex2jar:将反编译后的classes. ...
- SQLite3的安装与使用
下载地址:https://www.sqlite.org/download.html (下载相对应自已电脑的配置的数据库)(这里 我的电脑是 windows 64位操作系统) 下载完后 解压出来 sql ...
- C#静态变量 总结
在C#程序中,没有全局变量的概念,这意味着所有的成员变量只有该类的实例才能操作这些数据,这起到了“信息隐藏”的作用.但有些时候,这样做却不是个明智的选择. 假设我们要定义一个图书类,要求该类能保存图书 ...
- VirtualbBox:UEFI环境下安装VirtualBox
造冰箱的大熊猫@cnblogs 2018/12/18 1.问题 在一台新计算机上安装VirtualBox,启动虚拟机时出现“Kernel driver not installed (rc=-1908) ...
- 第七届蓝桥杯试题c/c++A组方格填数 回溯法
方格填数如下的10个格子 +--+--+--+ | | | |+--+--+--+--+| | | | |+--+--+--+--+| | | |+--+--+--+(如果 ...
- 【UOJ#228】 基础数据结构练习题
题目描述 sylvia 是一个热爱学习的女孩子,今天她想要学习数据结构技巧. 在看了一些博客学了一些姿势后,她想要找一些数据结构题来练练手.于是她的好朋友九条可怜酱给她出了一道题. 给出一个长度为 n ...
- go之基本数据类型
一.整形 Go语言里支持有符号和无符号两种整型.这里的符号就是正负号. 1.分类: 有符号的整型:int , int8 , int16 , int32 , int64 无符号的整型:uint,uint ...
- clone的fork与pthread_create创建线程有何不同&pthread多线程编程的学习小结(转)
进程是一个指令执行流及其执行环境,其执行环境是一个系统资源的集合,这些资源在Linux中被抽 象成各种数据对象:进程控制块.虚存空间.文件系统,文件I/O.信号处理函数.所以创建一个进程的 过程就是这 ...