HTML5事件——contextmenu 隐藏鼠标右键菜单
在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单。
首先先写一个自己的菜单:
<style>
ul, li {
margin: 0;
padding: 0;
}
#myMenu{
list-style: none;
width: 150px;
border: 1px solid #ccc;
border-bottom: none;
position: absolute;
display: none;
}
#myMenu li{
border-bottom: 1px solid #ccc;
padding: 5px 10px;
cursor: pointer;
}
#myMenu li:hover{
background-color: #ccc;
}
</style>
<ul id="myMenu">
<li>右键想干什么?</li>
<li>想看源码?</li>
<li>还是想审查元素?</li>
</ul>
显示时就是这个样子:
然后为document加入contextmenu事件,再取消掉其默认事件,让自己定义菜单显示出来:
var myMenu = document.getElementById("myMenu");
document.addEventListener("contextmenu", function(event){
event.preventDefault();
myMenu.style.display = "block";
//获取鼠标视口位置
myMenu.style.top = event.clientY + "px";
myMenu.style.left = event.clientX + "px";
});
当然,用户在别的地方单击记得隐藏菜单:
document.addEventListener("click", function(event){
myMenu.style.display = "none";
});
通过给自己定义菜单设置更好看的css将有更好的效果。
HTML5事件——contextmenu 隐藏鼠标右键菜单的更多相关文章
- ExtJS配置TabPanel的鼠标右键菜单(ContextMenu)功能
更新记录 2022年6月14日 发布. 2022年6月13日 初稿. TabPanel的鼠标右键菜单(ContextMenu)功能介绍 开源的TabPanel组件很少做到拖拽调整tab顺序功能的,支持 ...
- jQuery自定义Web页面鼠标右键菜单
jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...
- OpenLayers 3 之 加入地图鼠标右键菜单
加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
- JavaScript 自定义html元素鼠标右键菜单
自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
- (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单
原文 (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windo ...
- Jquery如何禁止鼠标右键菜单
jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...
- js自定义鼠标右键菜单
document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...
- jquery-11 如何制作鼠标右键菜单
jquery-11 如何制作鼠标右键菜单 一.总结 一句话总结:核心原理:找到右键菜单事件contextmenu,return false去掉默认事件,然后判断用户是否点的右键,然后在鼠标的位置显示菜 ...
- 如何在C#添加鼠标右键菜单
C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...
随机推荐
- linux安装composer
1,确保php已成功安装,并且php可以被访问php -r "copy('https://getcomposer.org/installer', 'composer-setup.php'); ...
- GHOST备份
整理日: 2015年2月16日 GHOST Disk2GHO STEP01 STEP02 STEP03 STEP04 STEP05 STEP06 STEP07 STEP08 STEP09 STEP10
- python相关的工具
在使用python的时候,发现Adaconda工具包真的很不错,里面集合了很多的工具,并且,自带了很多的python常用模块 另外,PyCharm编辑器也是不错的,界面清晰,可以实现数据的可视化
- Xcode中使用GitHub详解
为了熟悉git命令及将写的小Demo能够管理起来方便日后查询,所以选择使用GitHub. 现在我们来说说Xcode中如何使用GitHub--- 一.当然是要先有GitHub帐号并登录了(没有的注册一个 ...
- 横向技术分析C#、C++和Java优劣
转自横向技术分析C#.C++和Java优劣 C#诞生之日起,关于C#与Java之间的论战便此起彼伏,至今不辍.抛却Microsoft与Sun之间的恩怨与口角,客观地从技术上讲,C#与Java都是对传统 ...
- CABAC
CABAC(Context-based Adaptive Binary Arithmetic Coding),基于上下文的自适应二进制算术编码.CABAC是H.264/AVC标准中两种熵编码中的一种, ...
- Keil编译后的各文件介绍
编译生成的文件: .plg:编译器编译结果 .hex和.bin:可执行文件 .map和.lst:链接文件 .obj:目标文件 .crf..lnp..d和.axf:调试文件 .opt:保存工程配置信息 ...
- FLASH 存储学习-串行SPI NOR FLASH
1.1 SST25VF080B简介1.1.1 主要特性 关键点:容量.速度(时钟速度.读写速度).功耗. l 容量:8MBit: l 最高SPI时钟频率:50MHz: l 低功耗模式下电流消耗:5uA ...
- wpf 异步使用
方法前加 asyc,同步方法掉异步方法 public void Init() { buildUI(); } // await 只能用在异步方法上面 public async void buildUI( ...
- Node.js权威指南 (4) - 模块与npm包管理工具
4.1 核心模块与文件模块 / 574.2 从模块外部访问模块内的成员 / 58 4.2.1 使用exports对象 / 58 4.2.2 将模块定义为类 / 58 4.2.3 为模块类定义类变量或类 ...