`
piperzero
  • 浏览: 3555539 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。
offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕event.X和event.clientX的区别分析 - chenkehxx - chenkehxx的博客

<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">
<tr><td>
<div onclick="show()" style="background:silver;cursor:hand">
Click here to show.
</div>
</td></tr>
</table>
<script>
function show(){
alert("window.event.x:"+window.event.x+"\nwindow.event.y:"+window.event.y+"\nevent.clientX:"+event.clientX+"\nevent.clientY:"+event.clientY+"\nevent.offsetX:"+event.offsetX+"\nevent.offsetY:"+event.offsetY+"\nwindow.event.screenX:"+window.event.screenX+"\nwindow.event.screenY:"+window.event.screenY);
}
</script>


<wbr></wbr>
分享到:
评论

相关推荐

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

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

    onunload事件判断浏览器是刷新还是关闭窗口

    我们可以使用 onunload 事件和 event.clientX、event.clientY 属性或 window.event.screenX、window.event.clientY 属性来判断浏览器是刷新还是关闭窗口,这样我们可以执行相应的操作,提高用户体验。 在实际应用中...

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

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

    js 调色板 纯js

    var left = document.body.scrollLeft + event.clientX; var top = document.body.scrollTop + event.clientY; if (event.clientX+clrPanel.style.pixelWidth &gt; document.body.clientWidth) { //对话框显示在...

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

    4. `clientX`和`clientY`属性: 这两个属性分别返回鼠标在浏览器视口(不包括滚动条)内的水平和垂直坐标。它们是只读属性,用于获取鼠标位置,但不能用于改变鼠标位置。 5. `ctrlKey`属性: 类似于`altKey`,`...

    Javascript之event大全

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

    window.event 对象详解

    此外,`event`对象还有许多其他特性,如`event.timeStamp`记录事件发生的时间戳,`event.clientX`和`event.clientY`表示鼠标相对于浏览器窗口的坐标。在处理复杂交互时,这些属性可以提供宝贵的信息。 总结起来,`...

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

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

    Javascript下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对象非常重要,它提供了许多有用的属性和方法,帮助...

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

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

    JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听...if(event.clientX&gt;document.body.clientWidth&&event.clientY&lt;0||event.altKey) { return "您要离开吗?"; } } [removed] 方式二:适用于IE和FF,不区分刷新和关闭

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

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

    JS和JQ的event对象区别分析

    在JS中,`event`对象还有一些特有的属性,如`event.x`和`event.y`,提供原始的鼠标位置信息,而`event.preventDefault()`用于阻止默认行为,`event.stopPropagation()`阻止事件冒泡。而在JQ中,`event....

    HTML DOM Event 对象

    而`event.clientX`和`event.clientY`则分别提供了相对于浏览器视口的鼠标水平和垂直坐标。 事件句柄(Event Handlers)是HTML 4.0引入的新特性,允许我们通过在HTML标签中添加特定属性来指定事件发生时的行为。例如...

    js获取鼠标点击位置

    1. **`getPointPosition()` 函数**:此函数接受一个事件对象作为参数,使用 `event.clientX` 和 `event.clientY` 获取鼠标相对于视口的位置,然后调用前面定义的 `pointerX()` 和 `pointerY()` 函数来获取鼠标相对于...

    封装自己的js工具-Event.txt

    不同的浏览器对事件的支持有所差异,特别是Internet Explorer(IE)与Firefox之间的区别。为了更好地跨浏览器兼容性和代码复用性,本文将介绍如何封装一个自定义的事件处理工具库。 #### 一、问题背景 在浏览器中...

Global site tag (gtag.js) - Google Analytics