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. 代理模式-aop

    https://www.jianshu.com/p/a82509c4bb0d 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期 ...

  2. 深入理解python协程

    目录 概述 生成器变形 yield/send yield send yield from asyncio.coroutine和yield from async和await 概述 由于 cpu和 磁盘读 ...

  3. JS单线程和异步

    线程和单线程的概念: 线程:是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同 ...

  4. 十进制数转N进制c++实现

    编写一个算法,将一个非负的十进制整数N转换为另一个基数为B的B进制整数. #include <iostream> #include<string.h> using namesp ...

  5. [sdoi 2010][bzoj 1925]地精部落(神仙dp)

    Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi, ...

  6. K8S中DaemonSet

    DaemonSet DaemonSet 确保全部(或者一些)Node 上运行一个 Pod 的副本.当有 Node 加入集群时,也会为他们新增一个 Pod .当有 Node 从集群移除时,这些 Pod ...

  7. python获取某路径下某扩展名的所有文件名和文件个数

    # -*- coding: utf-8 -*- # @Time : 19-1-10 下午10:02 # @Author : Felix Wang import os def get_file_coun ...

  8. linux下源码安装mariadb

    1.mariadb源码包下载地址:https://downloads.mariadb.org/ 2.安装mariadb是依赖包,创建mysql用户和目录: 命令  yum -y install rea ...

  9. 消息模板-RabbitTemplate

    RabbitTemplate是我们在与SpringAMQP整合的时候进行发送消息的关键类该类提供了丰富的发送消息的方法,包括可靠性消息投递.回调监听消息接口ConfirmCallback.返回值确认接 ...

  10. 3.Linux系统文件名字体不同的颜色都代表什么

    在Linux中,文件的颜色都是有含义的.其中, Linux中文件名颜色不同,代表文件类型不一样.如下所示: 白色:表示普通文件浅蓝色:表示链接文件: 灰色:表示其他文件: 绿色:表示可执行文件: 红色 ...