HTML5事件-自定义右键菜单
WEB领域中，为实现上下文菜单，开发人员面临的主要问题是如何确定应该显示这个上下文菜单（Windows 中，右键单击；Mac 中，Ctrl+单击），
以及如何屏蔽与该操作相关联的默认上下文菜单。
解决方案：
contextmenu事件，用以表示何时应该显示上下文菜单，以便取消默认的上下文菜单而提供自定义的菜单。
contextmenu事件支持冒泡，可以通过为document指定一个事件处理程序，用以处理页面上所有此类事件。
html代码
<!DOCTYPE html>
<html>
<title></title>
<body>
<div id="myDiv">
Right click or Ctrl+click me to get a custom context menu.
Click anywhere esle to get the default context menu.
</div>
<ul id="myMenu" style="postion: absolute; visibility: hidden; background: silver;">
<li>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.huawei.com">huawei</a>
<a href="http://www.cnblogs.com">cnblogs</a>
</li>
</ul>
<body>
</html>
js代码
var EventUtil = {
addHandler: function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent("on" + type, handler);
}else{
element["on" + type] = handler;
}
},
getEvent: function(event){
return event?event: window.event;
},
getTarget: function(event){
return event.target|| event.srcElement;
},
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
removeHandler: function(event){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}
else if(element.detachEvent)
{
element.detachEvent("on" + type, handler);
}else{
element["on" + type] = null;
}
},
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
getCharCode: function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}
EventUtil.addHandler(window, "load", function(event){
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "contexmenu", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById("myMenu");
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.visibility = "visible";
});
EventUtil.addHandler(document, "click", function(event){
document.getElementById("myMenu").style.visibility = "hidden";
});
})
HTML5事件-自定义右键菜单的更多相关文章
- 阻止右键菜单（阻止默认事件）&&跟随鼠标移动（大图展示）&&自定义右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS简单实现自定义右键菜单
RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...
- antd Tree组件中，自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
- AS3.0 自定义右键菜单类
AS3.0 自定义右键菜单类: /** * 自定义右键菜单类 * 自定义菜单项不得超过15个,每个标题必须至少包含一个可见字符. * 标题字符不能超过100个,并且开头的空白字符会被忽略. * 与任何 ...
- js之自定义右键菜单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单
连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体 ...
- JS学习笔记 - 自定义右键菜单、文本框只能输入数字
<script> // 事件总共有2个部分, //1.点击鼠标右键的表现 oncontextmenu 2.点击鼠标左键的表现(即普通点击onclick) // 点击右键,div位置定位到鼠 ...
- js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）
js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...
- DevExpress的TreeList实现自定义右键菜单打开文件选择对话框
场景 DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
随机推荐
- Appium +Python 连接真机测试
1.数据线连接电脑和手机: 2.用adb获取手机的UUID:cmd-> adb devices 前面的就是你手机的UUID 3.打开appium,选择手机的安卓版本(关于手机中查看),填写手机的 ...
- 如何使用Jenkins进行持续集成测试
如何使用Jenkins进行持续集成测试: 安装Java环境: 安装Jenkins:两种方式,直接运行文件:使用tomcat运行: 创建一个job,构建的时候选择 execute Windows bat ...
- NYOJ 914 Yougth的最大化【二分/最大化平均值模板/01分数规划】
914-Yougth的最大化 内存限制:64MB 时间限制:1000ms 特判: No 通过数:3 提交数:4 难度:4 题目描述: Yougth现在有n个物品的重量和价值分别是Wi和Vi,你能帮他从 ...
- CF 612C. Replace To Make Regular Bracket Sequence【括号匹配】
[链接]:CF [题意]:给你一个只含有括号的字符串,你可以将一种类型的左括号改成另外一种类型,右括号改成另外一种右括号 问你最少修改多少次,才能使得这个字符串匹配,输出次数 [分析]: 本题用到了栈 ...
- debug 英文翻译
declaration of 'int a' shadows a parameter :函数参数里,已经有这两个名称的变量了,指定义了同名的参数,造成了隐藏. expected primary-exp ...
- python3爬虫爬取网页思路及常见问题（原创）
学习爬虫有一段时间了,对遇到的一些问题进行一下总结. 爬虫流程可大致分为:请求网页(request),获取响应(response),解析(parse),保存(save). 下面分别说下这几个过程中可以 ...
- ( 转 ) MySQL高级 之 explain执行计划详解
使用explain关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的,分析你的查询语句或是表结构的性能瓶颈. explain执行计划包含的信息 其中最重要的字段为:i ...
- [BZOJ4316]小C的独立集(圆方树DP)
题意:求仙人掌图直径. 算法:建出仙人掌圆方树,对于圆点直接做普通的树上DP(忽略方点儿子),方点做环上DP并将值直接赋给父亲. 建图时有一个很好的性质,就是一个方点在邻接表里的点的顺序正好就是从环的 ...
- 【博弈论】【SG函数】bzoj1777 [Usaco2010 Hol]rocks 石头木头
仅有距根节点为奇数距离的节点的石子被移走对答案有贡献,∵即使偶数的石子被移走,迟早会被再移到奇数,而奇数被移走后,不一定能够在移到偶数(到根了). 最多移L个:石子数模(L+1),比较显然,也可以自己 ...
- 前端基础-JavaScript的基本概述和语法
1.JavaScript概述 2.JavaScript引入方式 3.JavaScript语言规范 4.JavaScript语言基础 5.JavaScript数据类型 6.JavaScript运算符 7 ...