HTML5之自定义上下文菜单实现
发布在HTML5笔记2016年1月11日view:3061HTML5前端开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

评论
发表评论
3年前

OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台,可以定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。可以在官网注册体验哦~

4年前
赞了此文章!
WRITTEN BY
惊鸿三世
爱前端,爱读书,生命不断,学习不止。
TA的新浪微博
PUBLISHED IN
HTML5笔记

HTML5开发笔记

我的收藏