js禁止默认的右键菜单或出现自定义右键菜单

时间:2022-03-22 19:18:14

1、屏蔽默认的右键菜单

js:
document.getElementById('myimg').oncontextmenu=function(){return false;}
jquery:
$('#myimg').oncontextmenu=function(e){return false;} //not ok
$('#myimg').bind('contextmenu',function(e){return false;}) //ok
oncontextmenu在IE6上测试发现也可以。
而下面的mousedown方法则均无效:
.onmousedown=function(e){
  if(e.which==3) //e.whice=1、2、3,表示按下的分别是鼠标的左键、中键、右键
  return false; // not ok
}

2、显示自定义的菜单

可预先写好菜单:

<ul id='mymenu' style="display:none;position:fixed;background:white;padding:20px;">
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
</ul>

右键时显示就可以了:

$('#myimg').bind('contextmenu',function(e){
  $('#mymenu').css({display:'block',left:e.clientX,top:e.clientY});
  return false;
})
$('#mymenu').mouseleave(function(){
  $('#mymenu').css('display','none');
})