overflow鼠标拖拽显示_好程序员web前端教程分享默认行为和拖拽思路

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

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

return false

阻止默认行为

if(e.preventDefault) {

e.preventDefault();

}else {

window.event.returnValue = false;

}

事件移除。document.οnmοuseοver=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;

}

}

}

写一个完美拖拽的案例：

完美拖拽

html,body{overflow:hidden;}

body,div,h2,p{margin:0;padding:0;}

body{color:#fff;background:#000;font:12px/2 Arial;}

p{padding:0 10px;margin-top:10px;}

span{color:#ff0;padding-left:5px;}

#box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}

#box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}

#box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}

点击回放拖动轨迹

Drag:false

offsetTop:231

offsetLeft:533