JS自定义右键菜单实现代码解析


Posted in Javascript onJuly 16, 2020

今天来讲一个关于右键菜单的小demo,抛砖引玉。

首先,我们要用css和html做一个自定义右键菜单。

<!--自定义右键菜单html代码-->
<div id="menu">
<div class="menu">功能1</div>
<div class="menu">功能2</div>
<div class="menu">功能3</div>
<div class="menu">功能4</div>
<div class="menu">功能5</div>
</div>

/*css代码*/
#menu{
width: 0; /*设置为0 隐藏自定义菜单*/
height: 125px;
overflow: hidden; /*隐藏溢出的元素*/
box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
position: absolute; /*自定义菜单相对与body元素进行定位*/
}
.menu{
width: 130px;
height: 25px;
line-height: 25px;
padding: 0 10px;
}

现在我们已经有了自定义菜单,还需要一个很重要的事件 contextmenu。

> contextmenu :当你在页面上右键点击时,会触发此事件,并会跳出浏览器自带的右键菜单。

所以,我们要做的就是,在触发contextmenu事件时,取消掉默认行为(也就是阻止浏览器显示自带的菜单)

通过传入的事件对象,来确定鼠标的点击位置,作为left和top的值来进行元素的定位,并显示自定义菜单

window.oncontextmenu=function(e){
//取消默认的浏览器自带右键 很重要!!
e.preventDefault();

//获取我们自定义的右键菜单
var menu=document.querySelector("#menu");

//根据事件对象中鼠标点击的位置,进行定位
menu.style.left=e.clientX+'px';
menu.style.top=e.clientY+'px';

//改变自定义菜单的宽,让它显示出来
menu.style.width='125px';
}
//关闭右键菜单,很简单
window.onclick=function(e){

//用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能

document.querySelector('#menu').style.height=0;
}

这里只是一个很简单的例子,contextmenu事件支持所有 HTML 元素,这意味者你可以给不同的元素,自定义不同的右键菜单,由于contextmenu事件会冒泡传播,子节点上触发的事件,在父节点上也会触发,所以应该调用对应的函数或者设置对应的属性值来阻止事件冒泡。

根据事件对象来定位其实很复杂也很简单,除了clientY和clientX,鼠标事件对象提供了一系列复杂的相关信息,诸如layerX,pageX等等,这些值并不直观,还存在浏览器兼容问题,不过clientX和clientY,可以说是万金油属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
JS如何在不同平台实现多语言方式
Jul 16 #Javascript
vue使用axios实现excel文件下载的功能
Jul 16 #Javascript
vue实现自定义多选按钮
Jul 16 #Javascript
vue实现div单选多选功能
Jul 16 #Javascript
vue+AI智能机器人回复功能实现
Jul 16 #Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 #Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 #Javascript
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python实现对输入的密文加密
2019/03/20 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python3注册全局热键的实现
2020/03/22 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
大学生农村教师实习自我鉴定
2013/09/21 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
初中语文教学反思范文
2016/03/03 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python