clientX和clientY属性需要注意的地方

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

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

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

2. 解决方案:scrollTop, scrollLeft

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

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

[runjs]

3. 封装getPosition()函数

1 function getPosition(event) {
2       var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
3       var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
4
5       return {x:event.clientX+scrollLeft, y:event.clientY+scrollTop};
6 }
时间: 2024-11-14 21:20:04

clientX和clientY属性需要注意的地方的相关文章

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

一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们知道了这个位置信息我们可以做些什么了?举个例子,有时候我们需要获取鼠标在某一个元素中的相对位置,做一些事情,比如自定义拖动条. 案例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse

关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别

关于offsetX.offsetY.clientX.clientY.pageX.pageY.screenX.screenY的区别 offsetX.offsetY: 鼠标相对于事件源元素(srcElement)的X,Y坐标 clientX.clientY: 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条. pageX.pagey: 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广

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

一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和offsetTop 事件源元素相对于父节点的偏移的像素值. 三.offsetWidth和offsetHeight 获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的. 四.clientWidth

e.pageX;event.clientX,event.clientY,scrollLeft,clientLeft获取鼠标位置

示例一: x方向没有滚动 var mx=0,my=0; function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;} function mouseCoords(ev){ if(ev.pageX||ev.pageY){ return{x:ev.pageX,y:ev.pageY}; } return{x:ev.clientX,y:ev.clientY+$(do

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

event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcElement)的X,

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

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的(this)对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的(this)对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标. screenY 设置或获取鼠

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

DOM事件简介

Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部分被触发,触发者可以是用户操作,也可以是浏览器本身.事件并不是只是在一处被触发和终止:他们在整个document中流动,拥有它们自己的生命周期.而这个生命周期让DOM事件有更多的用途和可扩展性. 作为一个开发人员,我们必须要理解DOM事件是如何工作的,然后才能更好的驾驭它,利用它们潜在的优势,开发出

事件的故事说明

客户端的javascript采用的是异步事件驱动模型. 1.事件类型是一个用来说明发生什么类型事件的字符串. 2.事件目标是发生的事件或与之相关的对象. 3.事件对象是与特定事件相关且包含有关该事件详细信息的对象. 4.事件传播是浏览器决定哪个对象触发其事件处理程序的过程.对于单个对象的特定事件,必须是不能传播的. 5.事件捕获,在容器元素上注册的特定处理程序有机会在事件传播到真实目标之前拦截它. 一.表单事件 form表单会触发submit和reset事件.表单元素还有change,focus