好程序员web前端分享默认行为和拖拽思路，默认行为：什么是默认行为：默认行为就是浏览器自己触发的事件。比如：a链接的跳转，fORM提交时的跳转，鼠标右键跳转；oncontexmenu当点击右键菜单的时候； return
好程序员web前端分享默认行为和拖拽思路，默认行为：什么是默认行为：默认行为就是浏览器自己触发的事件。比如：a链接的跳转，fORM提交时的跳转，鼠标右键跳转；
oncontexmenu当点击右键菜单的时候；
return false 阻止默认行为 if(e.preventDefault) { e.preventDefault(); }else { window.event.returnValue = false; }事件移除。document.onmouseover=null;拖拽事件：
onmousedown onmousemove onmouseup
拖拽思路：
1.给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键
当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置
在onmousemove事件中，设定目标元素的left和top，
公式
目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）
目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）
当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>--结束END--
本文标题: 好程序员web前端教程分享默认行为和拖拽思路
本文链接: https://lsjlt.com/news/234073.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0