基于JavaScript实现右键菜单和拖拽功能
下面先给大家介绍下js实现的右键菜单功能，具体详情如下所示：
这一章解决的问题
1、实现右键菜单功能代码。
2、阻止默认事件的实际应用。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>右键菜单</title>
<styletype="text/css">
#menu{
position:fixed;
left:0;
top:0;
width:200px;
height:400px;
background-color:blue;
display:none;
}
</style>
</head>
<body>
<divid="menu">
</div>
<scripttype="text/javascript">
varmenu=document.getElementById("menu");
document.oncontextmenu=function(e){
vare=e||window.event;
//鼠标点的坐标
varoX=e.clientX;
varoY=e.clientY;
//菜单出现后的位置
menu.style.display="block";
menu.style.left=oX+"px";
menu.style.top=oY+"px";
//阻止浏览器默认事件
returnfalse;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。
}
document.onclick=function(e){
vare=e||window.event;
menu.style.display="none"
}
menu.onclick=function(e){
vare=e||window.event;
e.cancelBubble=true;
}
//document.addEventListener("contextmenu",function(e){
//vare=e||window.event;
//e.preventDefault();
//alert("menu");
//},false)
</script>
</body>
</html>
好了，以上代码详情是js实现的右键菜单功能。下面接着给大家介绍下js拖曳功能的代码解析
这一章解决的问题
1、怎样在网页中实现拖曳功能。
2、document.documentElement与document.body的区别。
document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。
3、getBoundingClientRect().left与offsetLeft的区别。
getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
4、e.clientX指的是鼠标点相对于窗口的坐标。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>弹窗</title>
<styletype="text/css">
#mask{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:hsla(250,100%,50%,0.6);
display:none;
}
#popBox{
position:absolute;
background-color:#fff;
width:200px;
height:200px;
/*left:50%;
top:50%;*/
/*margin-top:-100px;
margin-left:-100px;*/
}
</style>
</head>
<body>
<buttonid="clickBtn">点击</button>
<divid="mask">
<divid="popBox"></div>
</div>
<scripttype="text/javascript">
varclickBtn=document.getElementById("clickBtn");
varpopBox=document.getElementById("popBox")
varmask=document.getElementById("mask");
clickBtn.onclick=function(){
mask.style.display="block";
popBox.style.left=(document.documentElement.clientWidth-popBox.offsetWidth)/2+"px";
popBox.style.top=(document.documentElement.clientHeight-popBox.offsetHeight)/2+"px";
}
popBox.onclick=function(e){
vare=e||window.event;//e指所有代码的集合，通过它可以获取事件的各种属性。
e.cancelBubble=true;//阻止事件冒泡，即点击事件不会传递到mask这一层，意味着不会触发点击mask事件代码。
}
mask.onclick=function(){
mask.style.display="none";
}
//拖拽mousedown->mousemove->mouseup
popBox.onmousedown=function(e){
vare=e||window.event;
varpos=popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
varoX=e.clientX-pos.left;//clientX指相对于窗口的坐标。
varoY=e.clientY-pos.top;
document.onmousemove=function(e){
vare=e||window.event;
varoLeft=e.clientX-oX;
varoTop=e.clientY-oY;
popBox.style.left=oLeft+"px";
popBox.style.top=oTop+"px";
if(oLeft<0){
popBox.style.left=0+"px";
};
if(oLeft>document.documentElement.clientWidth-popBox.offsetWidth){
popBox.style.left=document.documentElement.clientWidth-popBox.offsetWidth+"px";//document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。
}
if(oTop<0){
popBox.style.top=0+"px";
};
if(oTop>document.documentElement.clientHeight-popBox.offsetHeight){
popBox.style.top=document.documentElement.clientHeight-popBox.offsetHeight+"px";
}
}
popBox.onmouseup=function(){
document.onmousemove=null;
}
}
</script>
</body>
</html>
以上所述是小编给大家介绍的基于JavaScript实现右键菜单和拖拽功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！