基于JavaScript实现右键菜单和拖拽功能

下面先给大家介绍下js实现的右键菜单功能，具体详情如下所示：

这一章解决的问题

1、实现右键菜单功能代码。

2、阻止默认事件的实际应用。

#menu {
position: fixed;
left:0;
top:0;
width:200px;
height: 400px;
background-color: blue;
display: none;
}

好了，以上代码详情是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指的是鼠标点相对于窗口的坐标。

#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;


}



点击

以上所述是小编给大家介绍的基于Javascript实现右键菜单和拖拽功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！