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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
React路由管理之React Router总结
May 10 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
详解JavaScript中分解数字的三种方法
Jan 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安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php中session与cookie的比较
2015/01/27 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python标准库之sqlite3使用实例
2014/11/25 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
Python命令行解析模块详解
2018/02/01 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
课堂教学改革实施方案
2014/03/17 职场文书
公司晚会主持词
2014/03/22 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
如何用JS实现简单的数据监听
2021/05/06 Javascript
数据库之SQL技巧整理案例
2021/07/07 SQL Server
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技