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

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

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

contextmenu事件

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

阻止冒泡

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

Demo实现


<!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中均支持。

原创文章,转载请注明: 转载自 熊建刚的博客

本文链接地址: HTML5之自定义上下文菜单实现

熊 建刚

热爱前端,但不局限于前端,喜欢尝试各种新技术,爱好读书。

发表评论

电子邮件地址不会被公开。 必填项已用*标注