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操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
随机推荐
- Number of Parallelograms CodeForces - 660D (几何)
Number of Parallelograms CodeForces - 660D You are given n points on a plane. All the points are dis ...
- httpleaks及url的小技巧(http:evil)
HTTP Leak攻击简介 当前Web技术下包含了大量HTML元素和属性,这些HTML元素和属性会请求一些外部资源,而在它们的HTTP请求过程中,可能存在潜在的敏感信息泄露.为此,德国著名网络安全公司 ...
- HTML符号代码速查表
HTML实体符号被用作实现保留字符(reserved characters)或者表达键盘无法输入的一些常用字符.在大多数浏览器中默认的字符集为ISO-8859-1.HTML实体符号使我们在网页设计中经 ...
- HTML实现背景颜色的渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- TXNLP 33-40
词向量: 回顾基于检索的问答系统 倒排表解决:坑爹的翻译...应该翻译成“反向索引” 常规的索引是文档到关键词的映射: 文档——>关键词但是这样检索关键词的时候很费力,要一个文档一个文档的遍历一 ...
- h5 rem计算
设置html默认font-size: 100px,此时默认的页面的width是750px,然后根据手机大小改变html节点的font-size,从而改变rem的大小,代码如下: <script& ...
- Java之正则表达式来判断字符串中是否包含字母
/** * 使用正则表达式来判断字符串中是否包含字母 * @param str 待检验的字符串 * @return 返回是否包含 * true: 包含字母 ;false 不包含字母 */ public ...
- Vim常用插件命令手册
此文章记录了,笔者使用的插件中的主要命令. junegunn/vim-plug :PlugInstall 安装插件 :PlugClean 清理插件 :PlugUpgrade 升级插件管理器 :Plug ...
- gtid 同步1050异常处理
gtid 同步1050异常处理 .sql CREATE TABLE `fudao_student_lable` ( `id` ) NOT NULL AUTO_INCREMENT, `uid` ) un ...
- 34.第一次只出现一次的字符(python)
题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 两次遍历,第一次存放字 ...