好程序员web前端教程分享默认行为和拖拽思路-创新互联

好程序员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>
<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>

文章标题：好程序员web前端教程分享默认行为和拖拽思路-创新互联
新闻来源：https://www.cdcxhl.com/article30/csdepo.html

成都网站建设公司_创新互联，为您提供动态网站、网站设计、营销型网站建设、微信小程序、手机网站建设、全网营销推广

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容