溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
好程序員web前端分享默認行為和拖拽思路，默認行為：什么是默認行為：默認行為就是瀏覽器自己觸發(fā)的事件。比如：a鏈接的跳轉(zhuǎn)，form提交時的跳轉(zhuǎn)，鼠標右鍵跳轉(zhuǎn)；
oncontexmenu當點擊右鍵菜單的時候；
return false
阻止默認行為
if(e.preventDefault) {
e.preventDefault();
}else {
window.event.returnValue = false;
}
事件移除。document.onmouseover=null;拖拽事件：
onmousedown onmousemove onmouseup
拖拽思路：
1.給目標元素添加onmousedown事件，拖拽的前提是在目標元素按下鼠標左鍵
2.當onmousedown發(fā)生以后，此刻給document添加onmousemove事件，意味著此刻鼠標在網(wǎng)頁的移動都將改變目標元素的位置
3.在onmousemove事件中，設(shè)定目標元素的left和top，
公式
目標元素的left = 鼠標的clientX – （鼠標和元素的橫坐標差，即offsetX）
目標元素的top = 鼠標的clientY– （鼠標和元素的縱坐標差，即offsetY）
4.當onmousedown發(fā)生以后，此刻給document添加onmouseup事件，意味著此刻鼠標在網(wǎng)頁的任意位置松開鼠標，都會放棄拖拽的效果
在onmouseup事件中，取消document的onmousemove事件即可。
事件觸發(fā)階段主要由于事件流：DOM0級事件處理階段和DOM2級事件處理；
DOM0級事件處理，是一種賦值方式，是被所有瀏覽器所支持的，簡單易懂容易操作；
DOM2級事件處理是所有DOM節(jié)點中的方法，可以重復(fù)綁定，但是瀏覽器兼容存在問題；
非IE下：(這里的事件名不帶on),第三個參數(shù)表示是在捕獲階段還是冒泡階段?？梢灾貜?fù)綁定事件，執(zhí)行順序按照綁定順序來執(zhí)行。
oDiv.addEventListener('click',chick,false);
oDiv.removeEventListener('click',chick ,false);
IE下：
只有冒泡階段,所以沒有第三個參數(shù)；（這里的事件名需要加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>
<title>完美拖拽</title>
<style type="text/css">
html,body{overflow:hidden;}
body,div,h3,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 h3{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
#box h3 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
</style>
<script type="text/javascript">
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>
<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
<h3><a href="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>免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼