好程序员web前端分享默认行为和拖拽思路,默认行为:什么是默认行为:默认行为就是浏览器自己触发的事件。比如:a链接的跳转,form提交时的跳转,鼠标右键跳转;
成都创新互联公司主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设公司、程序开发、网站优化、微网站、小程序设计等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都做网站、网站制作、成都外贸网站建设、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。
oncontexmenu当点击右键菜单的时候;
return false 阻止默认行为 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() ;
兼容问题解决:
var EventUtil={ addHandler:function(DOM,EventType,fn){ if(DOM.addEventListener){ DOM.addEventListener(EventType,fn,false); }else if(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) }else if(DOM.detachEvent){ DOM.detachEvent('on'+EventType,fn) }else{ DOM['on'+EventType]=null; } } }
写一个完美拖拽的案例:
完美拖拽