完美实现js拖拽效果 return false用法详解
程序员文章站
2022-05-14 19:56:07
本文为大家分享了完美实现js拖拽效果的具体代码，告诉大家return false的用法，供大家参考，具体内容如下
1.return false可以用来阻止默认事件即系统默...
本文为大家分享了完美实现js拖拽效果的具体代码，告诉大家return false的用法，供大家参考，具体内容如下
1.return false可以用来阻止默认事件即系统默认事件。例如通过阻止默认事件，来对textarea中的值进行范围限制（通过限制keycode的数值），也可以自定义在页面中的右键菜单（oncontextmenu）。
2.在鼠标移动（mousemove）等事件中，是需要给事件传一个参数，保证程序的正常运行。而为了兼容取事件方法为：var oevent=ev||event;
3.在节点中创建一个新的节点的方法为：
var obox=document.createelement('div');
obox.classname='box';
obox.style.left = odiv.offsetleft+'px';
obox.style.top = odiv.offsettop+'px';
obox.style.width = odiv.offsetwidth+'px';
obox.style.height = odiv.offsetheight+'px';
document.body.appendchild(obox);
//注意，在创建完之后一定要将创建好的节点加入body中！！！
下列为完整代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>完美拖拽2</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 150px;
height: 150px;
background: #71c525;
position: absolute;
}
.box{
border: 2px dashed black;
position: absolute;
}
</style>
<script>
window.onload=function()
{
var odiv = document.getelementbyid('div1');
var disx=null;
var disy=null;
odiv.onmousedown=function(ev)
{
var oevent=event||ev;
disx=oevent.clientx-odiv.offsetleft;
disy=oevent.clienty-odiv.offsettop;
var obox=document.createelement('div');
obox.classname='box';
obox.style.left = odiv.offsetleft+'px';
obox.style.top = odiv.offsettop+'px';
obox.style.width = odiv.offsetwidth+'px';
obox.style.height = odiv.offsetheight+'px';
document.body.appendchild(obox);
document.onmousemove=function(ev)
{
var oevent=event||ev;
var l=oevent.clientx-disx;
var t=oevent.clienty-disy;
if (l<0) {
l=0;
} else if (l>document.documentelement.clientwidth-odiv.offsetwidth) {
l=document.documentelement.clientwidth-odiv.offsetwidth;
}
if (t<0) {
t=0;
} else if (t>document.documentelement.clientheight-odiv.offsetheight) {
t=document.documentelement.clientheight-odiv.offsetheight;
}
obox.style.left = l+'px';
obox.style.top=t+'px';
};
document.onmouseup=function()
{
document.onmousedown=null;
document.onmousemove=null;
odiv.style.left = obox.offsetleft+'px';
odiv.style.top = obox.offsettop+'px';
document.body.removechild(obox);
};
return false;//阻止默认事件（系统默认事件）！
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。