下面先给大家介绍下js实现的右键菜单功能，具体详情如下所示：
这一章解决的问题
1、实现右键菜单功能代码。
2、阻止默认事件的实际应用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>右键菜单</title>
<style type="text/css">
#menu {
position: fixed;
left:0;
top:0;
width:200px;
height: 400px;
background-color: blue;
display: none;
}
</style>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
var menu = document.getelementbyid("menu");
document.oncontextmenu = function(e) {
var e = e || window.event;
//鼠标点的坐标
var ox = e.clientx;
var oy = e.clienty;
//菜单出现后的位置
menu.style.display = "block";
menu.style.left = ox + "px";
menu.style.top = oy + "px";
//阻止浏览器默认事件
return false;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。
}
document.onclick = function(e) {
var e = e || window.event;
menu.style.display = "none"
}
menu.onclick = function(e) {
var e = e || window.event;
e.cancelbubble = true;
}
// document.addeventlistener("contextmenu",function(e){
// var e = 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指的是鼠标点相对于窗口的坐标。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹窗</title>
<style type="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>
<button id="clickbtn">点击</button>
<div id="mask">
<div id="popbox"></div>
</div>
<script type="text/javascript">
var clickbtn = document.getelementbyid("clickbtn");
var popbox = document.getelementbyid("popbox")
var mask = 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) {
var e = e || window.event;//e指所有代码的集合，通过它可以获取事件的各种属性。
e.cancelbubble = true;//阻止事件冒泡，即点击事件不会传递到mask这一层，意味着不会触发点击mask事件代码。
}
mask.onclick = function() {
mask.style.display = "none";
}
//拖拽 mousedown->mousemove->mouseup
popbox.onmousedown = function(e) {
var e = e || window.event;
var pos = popbox.getboundingclientrect();//getboundingclientrect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getboundingclientrect()获取相对于窗口的left、top、right、bottom。
var ox = e.clientx - pos.left;//clientx指相对于窗口的坐标。
var oy = e.clienty - pos.top;
document.onmousemove = function(e) {
var e = e || window.event;
var oleft = e.clientx - ox;
var otop = 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>