ITPub博客

首页 > 应用开发 > Html/css > 好程序员web前端教程分享默认行为和拖拽思路

好程序员web前端教程分享默认行为和拖拽思路

原创 Html/css 作者:好程序员IT 时间:2019-07-11 16:31:43 0 删除 编辑

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


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2650257/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
欢迎关注公众号:好程序员特训营 web前端教程分享 723729549 大数据教程分享 703503210

注册时间:2019-03-20

  • 博文量
    238
  • 访问量
    183928