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. Django 中 cookie的使用

    Cookie是浏览器在客户端留下的一段记录,这段记录可以保留在内存或者硬盘上.因为Http请求是无状态的,通过读取cookie的记录,服务器或者客户端可以维持会话中的状态.比如一个常见的应用场景就是登 ...

  2. USRP B210 更改A通道或B通道

    USRP B210 更改A通道或B通道: 默认是A通道进行发射/接收,或设置 Mb0:Subdev Spec: A:A 设置B通道进行发射/接收,设置 Mb0:Subdev Spec: A:B

  3. AVL树的介绍和实现

    一.AVL树 AVL树是一种自平衡二叉查找树,因此在了解AVL树之前先介绍一下平衡二叉树.所谓平衡二叉树即该树中的任一个节点的左子树和右子树高度差不会超过1.如下图左是平衡二叉树,而右图则不是.节点4 ...

  4. JQuery 中each的使用方法

    JQuery中的each函数在1.3.2的官方文档中的描述如下: each(callback) 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都 ...

  5. 2018 焦作网络赛 G Give Candies ( 欧拉降幂 )

    题目链接 题意 : 给出 N 个糖果.老师按顺序给 1~N 编号的学生分配糖果.每个学生要么不分.要么最少分一个.且由于是按顺序发放.那么对于某个有分到糖果的编号为 i 的学生.则 1~(i-1) 这 ...

  6. audio 预加载

    http://www.w3school.com.cn/tags/av_event_loadeddata.asp var audio = document.createElement("aud ...

  7. [HNOI2008][bzoj 1005]明明的烦恼(prufer序列)

    1005: [HNOI2008]明明的烦恼 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 7121  Solved: 2816[Submit][Stat ...

  8. Paint the Digits

    C - Paint the Digits 思路:这道题就只需要利用单调栈,将整个数组扫一遍,求得的最后的栈内元素(要求全部小于非栈内元素)的颜色为1,其余为2 那么怎么实现呢?求最后的栈内元素(要求全 ...

  9. Java多线程核心知识(跳槽面试必备)

    多线程相对于其他 Java 知识点来讲,有一定的学习门槛,并且了解起来比较费劲.在平时工作中如若使用不当会出现数据错乱.执行效率低(还不如单线程去运行)或者死锁程序挂掉等等问题,所以掌握了解多线程至关 ...

  10. 20175215 2018-2019-2 第九周java课程学习总结

    第十一章 JDBC与MySQL数据库 11.1 MySQL数据库管理系统 下载安装过程略 使用的是MySQL 5.6而非5.7 11.2 启动MySQL数据库服务器 启动和root用户过程略 11.3 ...