好程式設計師 web前端分享預設行為和拖拽思路，預設行為：什麼是預設行為：預設行為就是瀏覽器自己觸發的事件。比如：a連結的跳轉，form提交時的跳轉，滑鼠右鍵跳轉；

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;

}

寫一個完美拖拽的案例：

<!DOCTYPE html>

<html>

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;}

</style>

window.onload=function(){

var positionArray = [];

var box = document.getElementById("box");

box.onmousedown = function(evt){

positionArray = [];

var x = evt.offsetX;

var y = 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);

var index = positionArray.length-1;

var timer = 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>

<h2><a href="javascript:;">點選回放拖動軌跡</a></h2>

<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>

好程式設計師web前端教程分享預設行為和拖拽思路

拖拽

相關文章