好程序员web前端分享默认行为和拖拽思路,默认行为:什么是默认行为:默认行为就是浏览器自己触发的事件。比如:a链接的跳转,form提交时的跳转,鼠标右键跳转;

oncontexmenu当点击右键菜单的时候;

returnfalse阻止默认行为if(e.preventDefault){e.preventDefault();}else{window.event.returnValue=false;}事件移除。document.onmouseover=null;拖拽

拖拽事件:

onmousedown onmousemove onmouseup

拖拽思路:


1.给目标元素添加onmousedown事件,拖拽的前提是在目标元素按下鼠标左键

2.当onmousedown发生以后,此刻给document添加onmousemove事件,意味着此刻鼠标在网页的移动都将改变目标元素的位置

3.在onmousemove事件中,设定目标元素的left和top,

公式

目标元素的left = 鼠标的clientX – (鼠标和元素的横坐标差,即offsetX)

目标元素的top = 鼠标的clientY– (鼠标和元素的纵坐标差,即offsetY)

4.当onmousedown发生以后,此刻给document添加onmouseup事件,意味着此刻鼠标在网页的任意位置松开鼠标,都会放弃拖拽的效果

在onmouseup事件中,取消document的onmousemove事件即可。

事件触发阶段主要由于事件流:DOM0级事件处理阶段和DOM2级事件处理;

DOM0级事件处理,是一种赋值方式,是被所有浏览器所支持的,简单易懂容易操作;

DOM2级事件处理是所有DOM节点中的方法,可以重复绑定,但是浏览器兼容存在问题;

非IE下:(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件,执行顺序按照绑定顺序来执行。

oDiv.addEventListener('click',chick,false);

oDiv.removeEventListener('click',chick,false);

IE下:

只有冒泡阶段,所以没有第三个参数;(这里的事件名需要加on)

oDiv.attachEvent();

oDiv.detachEvent() ;

兼容问题解决:

varEventUtil={addHandler:function(DOM,EventType,fn){if(DOM.addEventListener){DOM.addEventListener(EventType,fn,false);}elseif(DOM.attachEvent){DOM.attachEvent('on'+EventType,fn)}else{DOM['on'+EventType]=fn}},removeHandler:function(DOM,EventType,fn){if(DOM.removeEventListener){DOM.removeEventListener(EventType,fn,false)}elseif(DOM.detachEvent){DOM.detachEvent('on'+EventType,fn)}else{DOM['on'+EventType]=null;}}}

写一个完美拖拽的案例:

<!DOCTYPEhtml><html><title>完美拖拽</title><styletype="text/css">html,body{overflow:hidden;}body,div,h3,p{margin:0;padding:0;}body{color:#fff;background:#000;font:12px/2Arial;}p{padding:010px;margin-top:10px;}span{color:#ff0;padding-left:5px;}#box{position:absolute;width:300px;height:150px;background:#333;border:2pxsolid#ccc;top:50%;left:50%;margin:-75px00-150px;}#boxh3{height:25px;cursor:move;background:#222;border-bottom:2pxsolid#ccc;text-align:right;padding:010px;}#boxh3a{color:#fff;font:12px/25pxArial;text-decoration:none;outline:none;}</style><scripttype="text/javascript">window.onload=function(){varpositionArray=[];varbox=document.getElementById("box");box.onmousedown=function(evt){positionArray=[];varx=evt.offsetX;vary=evt.offsetY;document.onmousemove=function(evt){box.style.left=evt.clientX-x+"px";box.style.top=evt.clientY-y+"px";console.log({left:box.offsetLeft,top:box.offsetTop})positionArray.push({left:box.offsetLeft,top:box.offsetTop});}}box.onmouseup=function(){document.onmousemove=null;}box.children[0].firstChild.onmousedown=function(evt){evt.stopPropagation();}box.children[0].firstChild.onclick=function(){console.log(positionArray.length);varindex=positionArray.length-1;vartimer=setInterval(function(){if(index<0){clearInterval(timer);return;}box.style.left=positionArray[index--].left+"px";box.style.top=positionArray[index--].top+"px";},30);}};</script></head><body><divid="box"style="margin-left:0px;margin-top:0px;left:533px;top:231px;"><h3><ahref="javascript:;">点击回放拖动轨迹</a></h3><p><strong>Drag:</strong><span>false</span></p><p><strong>offsetTop:</strong><span>231</span></p><p><strong>offsetLeft:</strong><span>533</span></p></div></body></html>