Javascript拖放的一些高级应用(对代码进行逐行分析 便于您进行拖放)
拖之前先看看周围有东西会怎么样。高级浏览器不会有任何问题。我们把它放在IE7下测试一下,问题就出来了。数字
我们可以清楚地看到所有的角色都被选中了。用户体验很差,使用不方便。对了,我们之前加了一个退货假;帮我们解决了很多问题。如果去掉这个,chrome也会有同样的问题。也就是说,这还假;它可以解决chrome ff IE9浏览器的问题。
事实上,在我们的开发中,页面上会有很多元素,所以不可能只有一个div。其他地方拖动时不会被选中,比如百度地图,大家都可以玩。那么我们怎么做这样的拖累呢?你能解决IE7的问题吗?
解决方案:
我们可以用一点技巧来解决这个问题。这个技巧只有IE6-8支持,其实可以解决我们的问题,因为其他浏览器使用return false够了。让我们看看什么是技能。
是事件捕捉!在简要说明下附上代码。
title/title脚本类型=' text/JavaScript ' window . onload=function(){ var oBtn=document . getelementbyid(' BTN ');obtn . onclick=function(){ alert(1);};//网页上所有地方的事件都集中在一个按钮上,IE专用obtn . setcapture();//点击a}/script/head body输入类型=' button ' id=' BTN ' value=' button '/body实际上意味着页面上的所有事件都集中在一个点上,而点击页面上的任何位置都会弹出一个,这就是setCapture()的功能。
将所有事件放在一个按钮中进行处理!这只是IE兼容!
那么,让我看看如何修改前面的代码。
首先,我们将所有文档改回div。记住我们之前说的,因为快速拖动鼠标很容易拖出div,所以所有的事件都被添加到文档中。
现在我们不必这么做了。在前一个div中添加一个setCapture()来查看效果。
将选择IE 7正文中的文本。br/如果不添加return false chrome ff,就会出现dsadad br/div id=' div 1 ' as dsadad as dsadad/div as dsadadasadd/body style type=' text/CSS ' # div 1 { width : 200 px;高度: 200 px;背景:红色;绝对位置:}/style script type=' text/JavaScript '//拖放空div火狐低版本有bug window . onload=function(){ varo div=document . getelementbyid(' div 1 ');var DIsX=0;var DIsy=0;odiv . onmousedown=function(ev){ var oEvent=ev | | event;disX=oevent . clientx-odiv . offsetleft;disY=oevent . clienty-odiv . offsettop;odiv . onmousemove=function(ev){ var oEvent=ev | | event;var oDivLeft=oevent . client x-DIsX;var ODI vtop=oevent . clienty-disY;odiv . style . left=oDivLeft ' px ';odiv . style . top=ODI vtop ' px ';};odiv . onmouseup=function(){ odiv . onmousemove=null;oDiv.onmouseup=null};odiv . setcapture();返回false//防止默认事件,解决火狐bug };};/script这个时候,我们其实是在快速拖动,用鼠标拖出Div不会有问题。实际上,在添加setCapture()之后,整个网页上的所有事件都会聚集在这个div上。
现在,不会选择此文本。为什么呢?因为网页上的文字和图片的所有事件现在都在div上,所以他们无法获取事件!所以他们自然不会被选中。
当然,现在还有另一个问题?你会发现,当你试图选择那些单词时,你无法选择它们。
怎么办,事件都集中在div上。
所以呢,其实这个setCapture()就像一把锁,现在都锁住了,事件都在差异上面,现在解锁就可以了那相对应的就有释放捕获();
释放捕获();就是释放捕获。实际上在鼠标抬起的时候加上就可以了。
窗户。onload=function(){ var Odiv=document。getelementbyid(' div 1 ');var DIsX=0;var DIsy=0;奥迪夫。onmousedown=function(ev){ var oEvent=ev | | event;disX=oevent。clientx-odiv。offsetleftdisY=oevent。客户-奥迪夫。偏移;奥迪夫。onmousemove=function(ev){ var oEvent=ev | | event;var oDivLeft=oevent。客户端x-DIsX;var ODI vtop=oevent。client y-DIsy;奥迪夫。风格。left=oDivLeft ' px奥迪夫。风格。top=ODI vtop ' px};奥迪夫。onmouseup=function(){ odiv。onmousemove=nulloDiv.onmouseup=nullodiv。释放捕获();};奥迪夫。setcapture();返回false//阻止默认事件,解决火狐的bug };};现在就能解决文字选中的问题了。最后我们坐下兼容,实际上来说这个setCapture()是不兼容的,放在其他浏览器就错了。
那么很简单,我们只要合并这次与上一次的代码就可以了,兼容嘛做个如果判断就好。最后附上整理好的代码
脚本类型=' text/JavaScript '窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ');var DIsX=0;var DIsy=0;奥迪夫。onmousedown=function(ev){ var oEvent=ev | | event;disX=oevent。clientx-odiv。offsetleftdisY=oevent。客户-奥迪夫。偏移;if(odiv。setcapture){ odiv。onmousemove=mouseMoveoDiv.onmouseup=mouseUpodiv。setcapture();//IE 7下文字就不会被选中其实就是文字或图片得不到事件} else { document。onmousemove=Mousemovedocument.onmouseup=mouseUp}函数mouse move(ev){ var oEvent=ev | | event;var oDivLeft=oevent。客户端x-DIsX;var ODI vtop=oevent。client y-DIsy;奥迪夫。风格。left=oDivLeft ' px奥迪夫。风格。top=ODI vtop ' px}函数MouseUp(ev){这个。onmousemove=nullthis.onmouseup=nullif(odiv。释放捕获){ odiv。释放捕获();//释放捕获} }返回false//阻止默认事件,解决火狐的bug };};/script好了,都搞定了O(_)O哈哈~
版权声明:Javascript拖放的一些高级应用(对代码进行逐行分析 便于您进行拖放)是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。