好程序員web前端教程分享默認(rèn)行為和拖拽思路-創(chuàng)新互聯(lián)

好程序員web前端分享默認(rèn)行為和拖拽思路，默認(rèn)行為：什么是默認(rèn)行為：默認(rèn)行為就是瀏覽器自己觸發(fā)的事件。比如：a鏈接的跳轉(zhuǎn)，form提交時(shí)的跳轉(zhuǎn)，鼠標(biāo)右鍵跳轉(zhuǎn)；

目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、鳳凰網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

oncontexmenu當(dāng)點(diǎn)擊右鍵菜單的時(shí)候；

return false
 
阻止默認(rèn)行為
 
if(e.preventDefault) {
 
   e.preventDefault();
 
}else {
 
    window.event.returnValue = false;
 
}
事件移除。document.onmouseover=null;

拖拽

拖拽事件：

onmousedown onmousemove onmouseup

拖拽思路：

1.給目標(biāo)元素添加onmousedown事件，拖拽的前提是在目標(biāo)元素按下鼠標(biāo)左鍵

2.當(dāng)onmousedown發(fā)生以后，此刻給document添加onmousemove事件，意味著此刻鼠標(biāo)在網(wǎng)頁(yè)的移動(dòng)都將改變目標(biāo)元素的位置

3.在onmousemove事件中，設(shè)定目標(biāo)元素的left和top，

公式

目標(biāo)元素的left = 鼠標(biāo)的clientX – （鼠標(biāo)和元素的橫坐標(biāo)差，即offsetX）

目標(biāo)元素的top = 鼠標(biāo)的clientY– （鼠標(biāo)和元素的縱坐標(biāo)差，即offsetY）

4.當(dāng)onmousedown發(fā)生以后，此刻給document添加onmouseup事件，意味著此刻鼠標(biāo)在網(wǎng)頁(yè)的任意位置松開(kāi)鼠標(biāo)，都會(huì)放棄拖拽的效果

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

事件觸發(fā)階段主要由于事件流：DOM0級(jí)事件處理階段和DOM2級(jí)事件處理；

DOM0級(jí)事件處理，是一種賦值方式，是被所有瀏覽器所支持的，簡(jiǎn)單易懂容易操作；

DOM2級(jí)事件處理是所有DOM節(jié)點(diǎn)中的方法，可以重復(fù)綁定，但是瀏覽器兼容存在問(wèn)題；

非IE下：(這里的事件名不帶on),第三個(gè)參數(shù)表示是在捕獲階段還是冒泡階段?？梢灾貜?fù)綁定事件，執(zhí)行順序按照綁定順序來(lái)執(zhí)行。

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

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

IE下：

只有冒泡階段,所以沒(méi)有第三個(gè)參數(shù)；（這里的事件名需要加on）

oDiv.attachEvent()；

oDiv.detachEvent() ;

兼容問(wèn)題解決：

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

寫(xiě)一個(gè)完美拖拽的案例：

<!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:;">點(diǎn)擊回放拖動(dòng)軌跡</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>

文章標(biāo)題：好程序員web前端教程分享默認(rèn)行為和拖拽思路-創(chuàng)新互聯(lián)
新聞來(lái)源：http://jinyejixie.com/article30/csdepo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、微信小程序、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

好程序員web前端教程分享默認(rèn)行為和拖拽思路-創(chuàng)新互聯(lián)

拖拽