右键脚本html,基于JavaScript实现右键菜单和拖拽功能
下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示:
这一章解决的问题
1、实现右键菜单功能代码。
2、阻止默认事件的实际应用。
右键菜单
#menu {
position: fixed;
left:0;
top:0;
width:200px;
height: 400px;
background-color: blue;
display: none;
}
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)
好了,以上代码详情是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;
/*left:50%;
top:50%;*/
/*margin-top: -100px;
margin-left: -100px;*/
}
点击
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;
}
}
以上所述是小编给大家介绍的基于JavaScript实现右键菜单和拖拽功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
右键脚本html,基于JavaScript实现右键菜单和拖拽功能相关推荐
- html5 签到系统功能,项目实战之基于JavaScript实现每日签到打卡轨迹功能
今天扣丁学堂HTML5培训老师给大家介绍一下关于js实现每日签到打卡轨迹功能的具体代码,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧. 1.核心文件calendar.js var c ...
- html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
- 基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
整理:抓哇笔记 简介 大屏设计(AJ-Report)是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具.内置的基础功能包括数据源,数据集,报表管理. 多数据源支持,内置mysql.el ...
- vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
- vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
- html制作网易云音乐登录系统,JavaScript实现[网易云音乐Web站登录窗口]拖拽功能...
说明 你可能发现有很多网站他们的登录窗口或者说是登录框是可以拖动的, 更有甚者他们的站点提示框都可以拖动, 你也许可能会对这个功能的实现感兴趣, 那么这篇文章可能会对你有所帮助!具体的网站示例以 网易 ...
- 菜单侧边栏拖拽_SwiftUI —侧边栏菜单教程
菜单侧边栏拖拽 This week's SwiftUI tutorial covers a component that I've seen popping up in designs floatin ...
- JavaScript 拖拽功能
JavaScript 拖拽功能 - Web前端工程师面试题讲解 拖动图片 <img draggable="true"> 一开始 html 页面 <style> ...
- vue可视化拖拽生成工具_GitHub - 1260215278/dragUI: 基于vuedraggable.js + uni 的可视化拖拽编程,自动生成项目,自动生成代码,自行导入第三方组件...
dragUI 用于UNI可拖拽可视化编程 在线演示 效果图 基于 快速开始 参考uni官网安装普通uni项目(运行uni-app)运行到浏览器 另需要手动下载包npm install 项目目录 col ...
- 基于jQuery实现富文本的拖拽和修改大小
实现功能 实现富文本编辑器在定义区域内可以拖拽和调整其大小,编辑完成后可将内容生成图片. 由于系统较陈旧,所以选择的是基于jQuery的插件实现. 相关插件 wangEditor jQuery UI ...
最新文章
- 选择scrum任务看板管理工具的要点
- XTUOJ 1206 Dormitory's Elevator
- USACO 1.4 牛奶
- python怎么让输出的数字右对齐_python(格式化输出)
- Openpose推断阶段原理
- cefsharp 网页另存为图片_如何一键导出所有图片?我另存为了两小时,结果同事十秒就搞定了...
- 如何攻克 Android 调试难题?| 技术头条
- websocket传输数据大小限制_websocket 发送字符串数据上限是多少
- IOS开发之把 Array 和 Dictionaries 序列化成 JSON 对象
- JAVA OOP(一)——OOP概念,类与对象
- TikTok和抖音差别大吗?
- oracle查询同一天生日的,关于date生日判断的问题
- python字典的存储结构_Python 字典的存储结构
- Windows下调试工具Windbg入门
- android os适配机型,系统和支持机型对比
- 去法国,买哪些伴手礼既有面子又不破费
- wpsppt插入html,WPS的做好的一个PPT 怎么插入到另一个PPT?
- ApacheCN 公众号文章汇总 2019.5
- OpenShift 4 - 在 CI/CD Pipeline 中创建 KubeVirt 容器虚拟机 - 方法1+2 (视频)
- python获取站长之家素材