使用contextmenu事件控制右键菜单

在web页面中可以使用contextmenu事件控制右键菜单,且兼容所有主流浏览器。实现原理是绑定contextmenu事件,阻止浏览器的默认事件,显示你的自定义菜单(或者直接阻止,以达到屏蔽右键菜单的效果)。在线演示

关键代码如下:

<div id="div1" class="block">在此单击右键显示自定义右键菜单</div>
<div id="div2" class="block">此区域屏蔽右键菜单</div>
<ul id="menu">
	<li><a target="_blank" href='http://keenwon.com'>KeenWon主页</a></li>
	<li><a target="_blank" href='http://keenwon.com/demo/index.htm'>全部Demo</a></li>
</ul>

window.onload = function(e) {
    var div1 = document.getElementById('div1'),
        div2 = document.getElementById('div2'),
        menu = document.getElementById('menu');
	
    addHandler(div1, 'contextmenu', function(e){
        e = e || window.event;
        preventDefault(e);

        menu.style.left = e.clientX+'px';
        menu.style.top = e.clientY+'px';
        menu.style.display = 'block';
    });

    addHandler(div2, 'contextmenu', function(e){
        e = e || window.event;
        preventDefault(e);
    });

    addHandler(menu, 'contextmenu', function(e){
        e = e || window.event;
        preventDefault(e);
    });

    addHandler(document, 'mousedown', function(e){
        e = e || window.event;
        var obj = e.srcElement?e.srcElement:e.target;
        if(isChild(menu, obj)){
            return false;
        }
        menu.style.display = 'none';
    });
};

function isChild(parent, child) {
    while (child != null) {
        if (child == parent) {
            return true;
        }
        child = child.parentNode;
    }
    return false;
}

function addHandler(element, type, handler) {
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else{
        element.attachEvent('on'+type,handler);
    }
}

function preventDefault(e){
    e = e || window.event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}

其中涉及到的“javascript事件”相关内容,可以查看:



标签:

无觅相关文章插件,快速提升流量