在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 隐藏鼠标右键菜单的更多相关文章

  1. ExtJS配置TabPanel的鼠标右键菜单(ContextMenu)功能

    更新记录 2022年6月14日 发布. 2022年6月13日 初稿. TabPanel的鼠标右键菜单(ContextMenu)功能介绍 开源的TabPanel组件很少做到拖拽调整tab顺序功能的,支持 ...

  2. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  3. OpenLayers 3 之 加入地图鼠标右键菜单

    加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...

  4. JavaScript 自定义html元素鼠标右键菜单

    自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...

  5. (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单

    原文 (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windo ...

  6. Jquery如何禁止鼠标右键菜单

    jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...

  7. js自定义鼠标右键菜单

    document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...

  8. jquery-11 如何制作鼠标右键菜单

    jquery-11 如何制作鼠标右键菜单 一.总结 一句话总结:核心原理:找到右键菜单事件contextmenu,return false去掉默认事件,然后判断用户是否点的右键,然后在鼠标的位置显示菜 ...

  9. 如何在C#添加鼠标右键菜单

    C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...

随机推荐

  1. linux安装composer

    1,确保php已成功安装,并且php可以被访问php -r "copy('https://getcomposer.org/installer', 'composer-setup.php'); ...

  2. GHOST备份

    整理日: 2015年2月16日 GHOST Disk2GHO STEP01 STEP02 STEP03 STEP04 STEP05 STEP06 STEP07 STEP08 STEP09 STEP10

  3. python相关的工具

    在使用python的时候,发现Adaconda工具包真的很不错,里面集合了很多的工具,并且,自带了很多的python常用模块 另外,PyCharm编辑器也是不错的,界面清晰,可以实现数据的可视化

  4. Xcode中使用GitHub详解

    为了熟悉git命令及将写的小Demo能够管理起来方便日后查询,所以选择使用GitHub. 现在我们来说说Xcode中如何使用GitHub--- 一.当然是要先有GitHub帐号并登录了(没有的注册一个 ...

  5. 横向技术分析C#、C++和Java优劣

    转自横向技术分析C#.C++和Java优劣 C#诞生之日起,关于C#与Java之间的论战便此起彼伏,至今不辍.抛却Microsoft与Sun之间的恩怨与口角,客观地从技术上讲,C#与Java都是对传统 ...

  6. CABAC

    CABAC(Context-based Adaptive Binary Arithmetic Coding),基于上下文的自适应二进制算术编码.CABAC是H.264/AVC标准中两种熵编码中的一种, ...

  7. Keil编译后的各文件介绍

    编译生成的文件: .plg:编译器编译结果 .hex和.bin:可执行文件 .map和.lst:链接文件 .obj:目标文件 .crf..lnp..d和.axf:调试文件 .opt:保存工程配置信息 ...

  8. FLASH 存储学习-串行SPI NOR FLASH

    1.1 SST25VF080B简介1.1.1 主要特性 关键点:容量.速度(时钟速度.读写速度).功耗. l 容量:8MBit: l 最高SPI时钟频率:50MHz: l 低功耗模式下电流消耗:5uA ...

  9. wpf 异步使用

    方法前加 asyc,同步方法掉异步方法 public void Init() { buildUI(); } // await 只能用在异步方法上面 public async void buildUI( ...

  10. Node.js权威指南 (4) - 模块与npm包管理工具

    4.1 核心模块与文件模块 / 574.2 从模块外部访问模块内的成员 / 58 4.2.1 使用exports对象 / 58 4.2.2 将模块定义为类 / 58 4.2.3 为模块类定义类变量或类 ...