JavaScript event对象clientX,offsetX,screenX异同 带图 .

转自:http://www.cnblogs.com/long_/archive/2010/09/09/1822574.html

  event对象是JavaScript中最重要的对象之一,他代表了各种事件的状态,在各种事件的事件处理中经常用到,比如键盘活动、鼠标活动等等,其中有几个对象官方说的比较模糊,很难理解,这里有必要通俗化的理解一下。

     概念(不是官方,来源于网络):

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

     具体分析实验点这里。已经分析的很清楚了,这是目前网上讲的比较透彻的博文。为了理解这个状态,我做了一个效果图,希望能帮助理解、加深记忆。

     说明,这是上面那个博文里面的运行图,事件为单击图中触发点。直线代表各种值的计算范围。

时间: 2024-11-01 21:53:18

JavaScript event对象clientX,offsetX,screenX异同 带图 .的相关文章

JavaScript event对象整理及详细介绍_javascript技巧

Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置:(在DOM标准中,这两个属性值都不考虑

javascript Event对象详解及使用示例_基础知识

Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.一旦事件发生,便会生成Event对象,如单击一个按钮,浏览器的内存中就产生相应的 event对象. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. [event属性]: altKey, button, cancelBubble, clientX, clien

javascript event在FF和IE的兼容传参心得(绝对好用)_javascript技巧

event在IE和FF不兼容,今天传参碰到些问题,参考网上的一些方法,有所心得: aClassArray[i].onmouseover = function () { //代码直接写在里面是可以的,要传参也可以传,只是不方便复用 }; aClassArray[i].onmouseover =linkMouseover//不传参的情况下是可以用的,但后续不能用 arguments.callee.caller.arguments[0] aClassArray[i].onmouseover =link

Javascript技术之详尽解析event对象

javascript|对象 描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML><HEAD><TITLE>Can

JavaScript让IE浏览器event对象符合W3C DOM标准_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

javascript 里面的 Object Event 对象 比较

问题描述 javascript 里面的 Object Event 对象 比较 今天在写一段事件代码时发现了这个问题,请问划线处为什么输出false 源码 //获得鼠标事件 mouseup mousedown 输出你按了鼠标的 左键(0) 右键(2) 中间键(1) function getButton(e) { var ent=window.event; alert(ent==window.event); //false alert(ent==e); //false if(e) { return

FireFox JavaScript全局Event对象_javascript技巧

而在FireFox中却没有这样的对象,如果有函数嵌套调用,需要不停的向下传递Event,例如下面的场景. 复制代码 代码如下: <div style="background-color:Red; width:300px; height:300px;" onclick="Test(event,this);" id="panel"></div> function Test(event,dom){ Test1(event); }

HTML DOM Event 对象

HTML DOM Event 对象 实例 哪个鼠标按钮被点击? 光标的坐标是? 被按的按键的 unicode 是? 相对于屏幕,光标的坐标是? shift 键被按了吗? 哪个元素被点击了? 哪个事件类型发生了? Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 事件句柄 (Event Handlers) HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的

js中window.event对象在ie与ff中的区别

一.event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromelement 和 toelement 属性只对 onmouseover 和 onmouseout 事件有意义.   1.window.event   IE:有window.event对象   FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=domousemove(event)   2 .鼠标当前坐标   IE::event.x和eve