各个浏览器中鼠标位置的属性 offsetX layerX PageX clientX (自由拖动框,防止文字选中)
2012-12-27 15:10
141 查看
参考:
http://blog.csdn.net/crazy_fire/article/details/7721587 http://www.funnyhao.com/pagex-clientx-offsetx-layerx-of-those-things/
1.offsetX和layerX
offsetX:
IE特有(新版本浏览器 除了ff都支持),鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。
layerX:
FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点,
也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点
2.PageX和clientX
PageX和clientX ,这个两个比较容易搞混,
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器的可视窗口为参考点,随滑动条移动 而变化.
IE中没有PageX,解决办法:
PageY=clientY+scrollTop-clientTop;
页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
Jquery中的PageX代码:
网上别人总结的关于这六个纠结的纠结表..
附:一个可以自由拖动的代码 ( js实现)
上面代码有一个问题,在拖动目标的时候,经常有文字被选中,解决这个问题需要加入下面代码片段:
附张图:(网上搜的)
http://blog.csdn.net/crazy_fire/article/details/7721587 http://www.funnyhao.com/pagex-clientx-offsetx-layerx-of-those-things/
1.offsetX和layerX
offsetX:
IE特有(新版本浏览器 除了ff都支持),鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。
layerX:
FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点,
也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点
2.PageX和clientX
PageX和clientX ,这个两个比较容易搞混,
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器的可视窗口为参考点,随滑动条移动 而变化.
IE中没有PageX,解决办法:
PageY=clientY+scrollTop-clientTop;
页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
Jquery中的PageX代码:
// Calculate pageX/Y if missing and clientX/Y available if ( event.pageX == null && event.clientX != null ) { var doc = document.documentElement, body = document.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); }
网上别人总结的关于这六个纠结的纠结表..
offsetX/offsetY: W3C- IE+ Firefox- Opera+ Safari+ chrome+ x/y: W3C- IE+ Firefox- Opera+ Safari+ chrome+ layerX/layerY: W3C- IE- Firefox+ Opera- Safari+ chrome+ pageX/pageY: W3C- IE- Firefox+ Opera+ Safari+ chrome+ clientX/clientY: W3C+ IE+ Firefox+ Opera+ Safari+ chrome+ screenX/screenY :W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
附:一个可以自由拖动的代码 ( js实现)
<!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="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function drag(o){ if(!document.getElementById){return false}; o=document.getElementById(o); if(!o){return false}; o.style.position="absolute"; o.onmousedown=function(e){ e=e||window.event; var x=e.layerX||e.offsetX; var y=e.layerY||e.offsetY; document.onmousemove=function(e){ e=e||window.event; //获取所有浏览器的e.pageX if ( e.pageX == null && e.clientX != null ) { var doc = document.documentElement, body = document.body; e.pageX = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); e.pageY = e.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); } o.style.left=(e.pageX-x)+"px"; //如果没有滚动条,用e.clientX也是对的 o.style.top=(e.pageY-y)+"px";}; document.onmouseup=function(){ document.onmousemove=null; o.onmousedown=null; } } } </script> </head> <body> <div id="cen"> <p class="control" style="margin-bottom:10px; cursor:move" title="拖拽" onmousedown="drag('cen')" >点俺拖拽</p> <p>1111111111111111111111</p> <p>111111111111111</p> <p>1111111111</p></div> <p style="height:900px;">测试</p> </body> </html>
上面代码有一个问题,在拖动目标的时候,经常有文字被选中,解决这个问题需要加入下面代码片段:
try{ if(document.selection){//IE ,Opera if(document.selection.empty) document.selection.empty();//IE else{//Opera document.selection = null; } }else if(window.getSelection){//FF,Safari window.getSelection().removeAllRanges(); } }catch(e){}
附张图:(网上搜的)
相关文章推荐
- 各个浏览器中鼠标位置的属性 offsetX layerX PageX clientX (自由拖动框,防止文字选中)
- js获取鼠标焦点位置并选中一部分文字
- 新浪微博插入话题后部分文字选中的js实现(控制鼠标指针位置/自动选择指定文本)
- html body标签的几个属性 禁用鼠标右键,禁用鼠标选中文字等
- ubuntu系统使用firefox浏览器编辑文字鼠标选中字符被删除解决方法
- 浏览器鼠标位置PageX/Y,offsetX/Y,screenX/Y,clientX/Y,layerX/Y与兼容
- 取消鼠标拖动选中文字的方法
- label指定位置文字属性设置
- C#鼠标拖动控件改变位置并绘制虚框
- js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
- 利用HTML5的drop、drag及拖动属性做元素位置交换《我是学霸》
- 02 js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
- JS魔法堂:关于元素位置和鼠标位置的属性
- JavaScript中获取鼠标位置相关属性总结
- Chrome 鼠标左键选中文字自动关闭的问题
- [Object-c]UITextView 在边缘位置没有文字的属性 UIEdgeInsets
- Android:图片中叠加文字,支持拖动改变位置
- 各种浏览器的鼠标位置获取方法
- 自由控制显示图片大小,鼠标拖动图片看效果
- 如何获到其它进程鼠标选中的文字