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 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
一个php作的文本留言本的例子(五)
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP数组操作类实例
2015/07/11 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Django学习之文件上传与下载
2019/10/06 Python
python能做什么 python的含义
2019/10/12 Python
python实现udp聊天窗口
2020/03/31 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
说出数据连接池的工作机制是什么?
2013/04/19 面试题
Delphi CS笔试题
2014/01/04 面试题
总裁办公室主任职责
2014/01/02 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
敬老模范事迹
2014/05/21 职场文书
安全标兵事迹材料
2014/08/17 职场文书