`
jamm19860411
  • 浏览: 86609 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

说一下event.x,event.clientX,event.offsetX区别

阅读更多
解释一下event.X和event.clientX有什么区别?
  
    event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
    event.X也一样
    但是如果设置事件对象的定位属性值为relative
    event.clientX不变
    而event.X返回事件对象的相对于本体的坐标

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。
offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。


clientX,   clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0,   clientY=0; 
offsetX,   offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0,   offsetY=0;  
screenX,   screenY是相对于用户显示器的位置  
x,y是鼠标当前相对于当前浏览器的位置
分享到:
评论

相关推荐

    event.x,event.clientX,event.offsetX区别

    clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。 offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <...

    event.X和event.clientX的区别分析

    总的来说,`event.clientX`和`event.X`的主要区别在于它们的坐标参考系不同,`clientX`始终基于浏览器的可视窗口,而`event.X`在定位属性为"relative"时会基于触发事件的元素。在编写JavaScript事件处理函数时,正确...

    Javascript下IE与Firefox下的差异兼容写法总结

    如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event....

    整理的比较全的event对像在ie与firefox浏览器中的区别

    如onmousemove=doMouseMove(event) 鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event....

    javascript之Event详解[定义].pdf

    语法:event.x 注释:这是个只读属性。 21. y属性 y属性用于返回鼠标在窗口客户区域中的Y坐标。语法:event.y 注释:这是个只读属性。 在JavaScript中,Event对象非常重要,它提供了许多有用的属性和方法,帮助...

    [JS]详尽解析window.event对象

    除了上述属性,`window.event`对象还包含其他属性,如`shiftKey`(检查Shift键状态)、`srcElement`(触发事件的元素,IE中等同于`target`)和`type`(事件类型),以及一些与鼠标和键盘交互相关的属性,如`offsetX`...

    JavaScript兼容浏览器FFIE技巧[定义].pdf

    - **鼠标位置(不考虑滚动条)**:IE使用event.x和event.y,FF使用event.pageX和event.pageY。通用做法是使用event.clientX和event.clientY。 - **鼠标位置(考虑滚动条)**:IE使用event.offsetX和event.offsetY...

    Javascript之event大全

    <BODY onmousemove="window.status='X=' + event.clientX + ' Y=' + event.clientY"> ``` 了解和熟练掌握JavaScript中的Event机制对于开发响应式和交互式的Web应用至关重要。通过监听和处理各种事件,开发者可以...

    比较全面的event对像在IE与FF中的区别 推荐

    如onmousemove=doMouseMove(event) 鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event....

    HTML在IE浏览器和FF浏览器中标签的使用

    - **鼠标当前坐标**:IE使用event.x和event.y,FF使用event.pageX和event.pageY。通用方法是使用event.clientX和event.clientY。 - **鼠标坐标加上滚动条距离**:IE使用event.offsetX和event.offsetY,FF使用event...

    [转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别

    在JavaScript中,处理鼠标事件时,经常会遇到一系列与鼠标位置相关的属性,如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...

    Javascript dom位置、大小、鼠标定位操作

    理解这些属性之间的差异至关重要,例如,`event.clientX` 和 `event.clientY` 是相对于窗口的,而`event.pageX` 和 `event.pageY` 则是相对于整个文档的。`event.offsetX` 和 `event.offsetY` 是相对于元素的可见...

    高手window.event对象详解

    - **定义**:`event.clientX` 和 `event.clientY` 分别表示鼠标相对于可视窗口的位置(水平/垂直坐标)。 - **值**:整数,表示鼠标指针位置。 - **应用场景**:常用于响应用户的鼠标移动,例如在页面上显示浮动...

    javascript鼠标的捕获

    var intx = document.body.scrollLeft + evt.clientX; var inty = document.body.scrollTop + evt.clientY; var div = findSrc(evt); div.style.top = inty - initY; div.style.left = intx - initX; window....

    IE和FF在对js支持的不同(整理)及解决方法

    2. 鼠标当前坐标 IE:event.x和event.y FF:event.pageX和event.pageY 解决办法:采用通用属性:event.clientX和event.clientY属性; 3. 鼠标坐标加上滚动条滚过的距离 IE:event.offsetX和event.offsetY FF:event

    IE与FireFox的兼容性问题分析

    如onmousemove=doMouseMove(event) 鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event....

    网页设计常用代码荟萃.pdf

    - `event.X` 在大多数情况下与`event.clientX`相同,但在相对定位时,`event.X`会返回相对于事件目标元素的坐标。 其他属性如`event.altKey`、`event.button`、`event.ctrlKey`等,分别用于检查Alt、鼠标按键和...

    JavaScript取得鼠标绝对位置程序代码介绍

    IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离) 2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离) 3. event.clientX,event.clientY以浏览器左上角为参考点(不...

    JavaScript中获取鼠标位置相关属性总结

    1. Firefox不支持`event.offsetX`、`event.offsetY`以及`event.x`和`event.y`,但可以使用`event.layerX`和`event.layerY`作为替代。 2. IE中的`event.x`和`event.y`等效于Firefox和Chrome中的`event.layerX`和`...

Global site tag (gtag.js) - Google Analytics