窗口拖拽小例子,牵扯出的x 、clientX、screenX研究
??? 本人在学习JavaScript事件注册、事件传递时,在网上找了一个很经典的窗口拖拽事例,其中牵扯到x、clientX、screenX等属性的区别,相信很多学习者在看到这个事例后,也查阅了许多相关材料,在此我也结合该事例,讲讲自己的理解。
?? 首先给出该拖拽事例代码:
?
?在做窗口拖拽时,很关键的是准确得到坐标点,这里var deltaX = event.clientX-elementToDrag.offsetLeft;这段码求出了x轴坐标点的该变量,也就是因为这些,本文并不详解事件注册,冒泡机制,因为注释也写的比较详细了。本文要做的就是在代码的基础上,解释x、clientX、screenX等属性的区别。看如下代码:
?随意点击窗口
?
?
因此:
clinetX是相对于浏览器的X轴。
offsetX,假如在用户区域点击,如这里的“拖动我”DIV中,它是相对用户区域的X轴,如果在用户区外点击,值与clientX相同。
screenX相对于计算机显示器的X轴。
?
?
1 楼 空谷悠悠 2010-06-25 经测试 clientX=x