布局
<ul style="display:none" id="contextMenu" class="contextMenu">
<li> <i class="icon icon-term-call"></i>
<span>呼叫</span>
</li>
<li> <i class="icon icon-term-als"></i>
<span>监听</span>
</li>
</ul>
屏蔽浏览器自带的右键事件
document.oncontextmenu = function () {
return false;
}
自定义区域右键事件
$(obj).unbind("mousedown").bind("mousedown", function (e) {
if (e.which == 3) { //单机右键
// console.log('是右键呀');
$('.contextMenu').show();
$('.contextMenu').css({
'left': (e.clientX + 20) + 'px',
'top': e.clientY + 'px'
})
}
});
点击其他区域关闭显示
$(document).bind('click', function (e) {
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循环判断至跟节点,防止点击的是div子元素
if (elem.id && elem.id == 'contextMenu') {
return;
}
elem = elem.parentNode;
}
$('.contextMenu').css('display', 'none'); //点击的不是div或其子元素
});