右键菜单contextmenu事件

概述

通过单击鼠标右键可以调出自定义上下文菜单。

这个事件的目标是发生用户操作的元素。

代码

// html
<div id="myDiv">
		右键单击我得到一个自定义的上下文菜单
	div>
<ul id="myMenu" style="position: absolute;visibility: hidden;background-color: silver">
	<li><a href="http://yangyong.info">杨勇的博客a>li>
	<li><a href="http://baidu.com">百度a>li>
	<li><a href="http://google.com">谷歌a>li>
ul>

// javascript
let div = document.getElementById('myDiv');

EventUtil.addHandler(div, 'contextmenu', function(event) {
   event = EventUtil.getEvent(event);
   EventUtil.preventDefault(event); // context事件是冒泡的，阻止浏览器默认事件

   let 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';
})

EventUtil请参考【事件处理程序】这篇博客