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 面向对象编程(2) 定义类
May 18 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
详解javascript中的Error对象
Apr 25 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
canvas 中如何实现物体的框选
Aug 05 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
常用的php对象类型判断
2008/08/27 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
python实现电子词典
2020/04/23 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python爬虫文件下载图文教程
2018/12/23 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
python regex库实例用法总结
2021/01/03 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
清扬洗发水广告词
2014/03/14 职场文书
超市促销活动总结
2014/07/01 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
销售员自我评价
2015/03/11 职场文书
大学生入党自传2015
2015/06/26 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers