HTML5之自定义上下文菜单实现

HTML5之自定义上下文菜单实现

上下文菜单,通常表现为通过单击鼠标右键可以弹出一个上下文菜单。目前,所有浏览器都实现了默认的上下文菜单,为实现自定义上下文菜单,首先需要屏蔽相关默认上下文菜单,其后是确定以什么方式显示上下文菜单,在本篇,我们讲解Html5中的contextmenu事件并用其实现一个自定义上下文菜单。
效果如图
自定义上下文菜单示例图
demo展示地址
自定义上下文菜单示例演示点此

contextmenu事件

contextmenu事件属于鼠标事件,所有其事件对象中包含与光标位置相关的属性。这个事件目标是用户操作的对象元素,其又是冒泡的,因此我们可以为dodument指定事件处理程序以点击事件关闭上下文菜单,而在需要实现上下文菜单的目标元素上注册contextmenu事件,在此元素上阻止冒泡。

阻止冒泡

在DOM事件中,event.preventDefault()可阻止事件冒泡,而在IE中,将event.returnValue的值设为false可阻止事件冒泡。

Demo实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM ContextMenu</title>
<style>
#customMenu {
position: absolute;
visibility: hidden;
background-color: silver;
width: 100px;
}

</style>

</head>
<body>
<div id="myMenu">右击鼠标以打开自定义菜单</div>
<ul id="customMenu">
<li><a href="">Add</a></li>
<li><a href="">Delete</a></li>
<li><a href="">Share</a></li>
</ul>
<script>
(function() {
/**
* [addHandler 处理事件注册兼容]
* @param {[type]} elem [dom元素]
* @param {[type]} type [事件类型]
* @param {[type]} handler [事件处理程序]
*/

function addHandler(elem, type, handler) {
if (document.addEventListener) {
elem.addEventListener(type, handler);
}else if (document.attachEvent) {
elem.attachEvent('on' + type, handler);
}else {
elem['on' + type] = handler;
}
}
var menuDiv = document.getElementById('myMenu');
var menu = document.getElementById('customMenu');
addHandler(menuDiv, 'contextmenu', getMenu);
addHandler(document, 'click', hideMenu);
function getMenu(event) {
event = event || window.event;
if (event.preventDefault){
event.preventDefault();
}else {
event.returnValue = false;
}
menu.style.left = event.clientX + 'px';
menu.style.top = event.clientY + 'px';
menu.style.visibility = 'visible';
}
function hideMenu(event) {
menu.style.visibility = 'hidden';
}
})();
</script>

</body>
</html>

如上contextmenu事件在IE,FireFox,Safari,Chrome和Opera中均支持。