HTML5事件——contextmenu 隐藏鼠标右键菜单
2016-03-17 14:36
513 查看
在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单。
首先先写一个自己的菜单:
显示时就是这个样子:
然后为document加入contextmenu事件,再取消掉其默认事件,让自己定义菜单显示出来:
当然,用户在别的地方单击记得隐藏菜单:
通过给自己定义菜单设置更好看的css将有更好的效果。
首先先写一个自己的菜单:
<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的canvas标签
- HTML5使用canvas绘制图形
- HTML5 - 使用<mark>标注高亮突显文本
- HTML5表单新增元素与属性 (续)
- HTML5表单新增元素与属性
- HTML5新增的非主体结构元素
- HTML5 - 使用<time>标注日期和时间
- HTML5 - 页面结构相关的新语义元素汇总
- HTML5 - 经典的上中下三段式布局(并使用<nav>实现侧边导航链接)
- HTML5 - 让老浏览器支持新语义元素的几种方法
- html5 图片转base64预览显示
- HTML5 - 在线检测网页在各种浏览器下的效果
- HTML5 - 使用Geolocation(地理定位)获取用户的位置
- HTML5 - 用<figure/>添加插图和图题
- HTML5新增的主体结构元素
- HTML5 - 简单的上下布局页面样例
- HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)
- HTML5 - 使用polyfill(腻子脚本)填补旧浏览器对html5的支持缺陷
- HTML5 - 各大浏览器对html5的支持情况
- 使用ionic框架的<ion-scroll>进行水平滚动时,导致页面难以上下滑动的解决方案