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


Posted in Javascript onNovember 28, 2016

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

这一章解决的问题

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

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

<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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>

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

Javascript 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
js表头排序实现方法
Jan 16 Javascript
Underscore源码分析
Dec 30 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 #Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 #Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 #Javascript
String字符串截取的四种方式总结
Nov 28 #Javascript
localStorage实现便签小程序
Nov 28 #Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 #Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 #Javascript
You might like
php 高性能书写
2010/12/11 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python网络爬虫实例讲解
2016/04/28 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
django数据库自动重连的方法实例
2019/07/21 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
为什么要有struct关键字
2012/05/08 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
网络工程师职业规划
2014/02/10 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
个人委托函范文
2015/01/29 职场文书
停电放假通知
2015/04/14 职场文书