clientX和clientY为可视区鼠标的位置

1. 随鼠标移动的div块[runjs]

当document有多个页面时,会出现问题。[runjs]

2. 解决方案:scrollTop, scrollLeft

需要注意scrollTop/scrollLeft的兼容性获取;

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

[runjs]

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属性需要注意的地方的更多相关文章

  1. 一文看懂js中的clientX,clientY,pageX,pageY,screenX,screenY

    一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们 ...

  2. 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

    一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...

  3. JS——事件详情(鼠标事件:clientX、clientY的用法)

    鼠标位置 >可视区位置:clientX.clientY 跟着鼠标移动的div案例 代码如下图:   这个案例,运用到前一篇文章中的event事件来处理.获取div的left和top值,当鼠标移动 ...

  4. JavaScript 中事件对象参数:clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  5. 理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY

    event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...

  6. JavaScript 中一些概念理解 :clientX、clientY、offsetX、offsetY、screenX、screenY

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...

  7. python 类属性 、实例属性,可变数据结构作为类属性需要注意的地方

    1.一些经典的python错误不去阅读和不重视,就会把错误的做法带入到实际项目中来,甚至造成难以排查问题. 2.有一个大笨猪,按java写观察者模式,java写得是直接在类名下声明一个实例属性(不加s ...

  8. 结构体和类中属性定义需要static地方

    private function Readxxx:Integer;static; public class property XXX:Integer read ReadXXx; Txxx =recor ...

  9. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

随机推荐

  1. Lambda方法推导(method references)

    在上一篇[http://www.cnblogs.com/webor2006/p/7707281.html]中提到了方法推导的东东: 这里说细的学习一下它,下面走起! Method references ...

  2. WebRTC的带宽估计[转载]

    带宽估计(BWE)模块的任务是决定你可以发送多大的视频流且不会造成网络拥塞,以此来保证不会降低视频质量. 在以前的带宽估计算法还是十分基础的,大体上是基于丢包而设计的.通常我们在开始慢慢的增加视频的比 ...

  3. windows10家庭版远程桌面连接报错:CredSSP加密oracle修正

    转 原地址:https://www.cnblogs.com/lindajia/p/9021082.html Windows10远程桌面连接 报错信息 : 网上找到方法 但是奈何是 "Win1 ...

  4. 一例tornado框架下处理上传图片并生成缩略图的例子

    class coachpic(RequestHandler): @gen.coroutine def post(self): picurl = self.request.files[] print(& ...

  5. Vue:选中商品规格改变字体和边框颜色(默认选中第一种规格)

    效果图: CSS: <div class="label"> <p>标签类别</p> <ul> <li v-for=" ...

  6. RAID技术超详细讲解

    RAID 技术是一种多磁盘技术,面对数据的各方面有着两面性的影响,整体来说优点大于缺点的,下面我将详细介绍一下 RAID ,简称磁盘阵列技术. 一.RAID 概述 1988 年美国加州大学伯克利分校的 ...

  7. BZOJ 3782: 上学路 Lucas+ExCRT+容斥+dp

    其实呢,扩展中国剩余定理还有一种理解方式:就是你有一坨东西,形如:$A[i]\equiv B[i](mod$ $P[i])$. 对于这个东西,你可以这么思考:如果最后能求出一个解,那么这个解的增量一定 ...

  8. cx_freeze multiprocessing 打包后反复重启

    写了给flask程序,此外还需要用multiprocessing 启动一个守护进程. 不打包一切正常,用cx_freeze打包后,发现flask反复重启.任务管理器里这个GUI窗口的进程数不断增加. ...

  9. poj 2976 Dropping tests (最大化平均值:二分查找)

    #include<iostream> #include<algorithm> #include<stdio.h> #include<math.h> #d ...

  10. 洛谷p2375 kmp

    题意 给你一个字符串,让你求一个\(num\)数组,\(num[i]\)为长度为\(i\)的前缀的公共前后缀长度不超过\(\lfloor \frac{i}{2}\rfloor\)的个数, 例如&quo ...