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

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

阅读更多

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

 

<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>


分享到:
评论

相关推荐

    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....

    Event对象详解

    &lt;BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y"&gt; 属性: altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, property...

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

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

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

    javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove,就可以实时获得鼠标位置。...event.x event.y 共计6组! 而且他们的区别并不明显,各浏览器间

    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....

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

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

    JS大全 web编程

    event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向...

    javascript 事件对象 坐标事件说明

    测试浏览器的版本: IETester 6 ,7 IE 8.0 Firefox 3.5.5 Chrome 4.1.249.1064 (45376) Opera 9.64 ... event.clientX event.clientY 总是相对于视口 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域

    js脚本学习 比较实用的基础

    event.offsetX 返回当前鼠标悬停X坐标值 event.offsetY 返回当前鼠标悬停Y坐标值 [removed](document.lastModified) 网页最后一次更新时间 [removed]=x 当双击鼠标产生事件 [removed]=x 单击鼠标键产生事件 ...

    可拖动的table

    o.x = e.clientX - rDrag.o.offsetLeft; o.y = e.clientY - rDrag.o.offsetTop; document.onmousemove = rDrag.move; document.onmouseup = rDrag.end; }, move:function(e){ e = rDrag.fixEvent(e); var o...

    javascript web对话框与弹出窗口

    loc_x=document.body.scrollLeft+event.clientX-event.offsetX; loc_y=document.body.scrollTop+event.clientY-event.offsetY; //window.showModalDialog(URL,self,”edge:raised;scroll:0;status:0;help:0;...

    js实现鼠标拖拽效果

    js实现鼠标拖拽效果 1、获取鼠标位置 获取鼠标位置的方法: 鼠标相对于元素的坐标点(不计算边框 ) 事件对象.offsetX(水平方向) 事件对象.offsetY(垂直方向) ... var x = e.offsetX; var y = e.offsetY; con

    javascript Event对象详解及使用示例

    Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。... 【event属性】: altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offset

    Javascript中Event属性搜集整理

    altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y 1....

    原生JS实现拖拽图片效果

    javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: ...

    JavaScript拖拽效果

    获取事件对象 var e = e || window.event; 根据需求需要用到的拖拽效果的坐标 clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离) clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移...

    JavaScript实现拖拽效果

    获取事件对象 var e = e || window.event; 根据需求需要用到的拖拽效果的坐标 clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离) clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移...

Global site tag (gtag.js) - Google Analytics