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. Solr初步

    Solr是一个独立的,基于Lucene的全文搜索服务器企业级搜索应用服务器,它对外提供API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引(solr生成倒排索引,数 ...

  2. 第六章 组件 56 组件-组件中的data

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. java两个实体公共属性赋值方法

    model1 info=new model1();info.setAge("123");info.setCode("1234");info.setName(&q ...

  4. monkey test——学习资料

    出处: http://www.testwo.com/blog/6107 http://www.testwo.com/blog/6146 http://www.testwo.com/blog/6188 ...

  5. URAL 2036 Intersect Until You're Sick of It 形成点的个数 next_permutation()函数

    A - Intersect Until You're Sick of It Time Limit:500MS     Memory Limit:65536KB     64bit IO Format: ...

  6. TTTTTTTTTTTTTT hdu 5763 Another Meaning 哈希+dp

    Another Meaning Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  7. Luogu P4139 上帝与集合的正确用法

    题目链接:Click here Solution: 这道题就考你会不会扩展欧拉定理,根据扩展欧拉定理可知 \[ a^b \equiv a^{(b\,mod\,\varphi(p))+\varphi(p ...

  8. Java集合框架系列大纲

    ###Java集合框架之简述 Java集合框架之Collection Java集合框架之Iterator Java集合框架之HashSet Java集合框架之TreeSet Java集合框架之Link ...

  9. Latex中 summation前后距离的设置

    use \hspace ,eg., \hspace{-.1cm} before and after summation to stop violation of margin. 比如下面一段公式代码 ...

  10. [笔记]C++下的数组声明

    /* 例子来源于<C++ Primer> */ ]; //prts是含有10个整数类型指针的数组 ]; //错误,没有引用的数组 ]; //指向有10个整型元素数组的指针 ]; //引用有 ...