请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员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,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>
<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;">
    <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前端培训官网:http://www.goodprogrammer.org/html5_class.shtml

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启