基于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中的运用上部
Nov 20 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 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
PHP4中实现动态代理
2006/10/09 PHP
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php实现用户登陆简单实例
2017/04/04 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python 装饰器深入理解
2017/03/16 Python
python绘制双柱形图代码实例
2017/12/14 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
opencv实现图像几何变换
2021/03/24 Python
个人简历自我鉴定
2013/10/11 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
公司建议书怎么写
2014/05/15 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
2014个人年度工作总结
2014/12/15 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python