对div实现右键弹出自定义菜单

最新推荐文章于 2023-06-06 15:13:06 发布

Qiustion

最新推荐文章于 2023-06-06 15:13:06 发布

阅读量5.2k

点赞数 4

分类专栏： HTML5+CSS3+JS

本文链接：https://blog.csdn.net/Qiustion/article/details/77523622

版权

HTML5+CSS3+JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

实现只对蓝色的Div弹出自定义菜单，其他位置弹出默认的浏览器菜单

js代码如下：

<script type="text/javascript">
  $(function(){
    var html='';
    html +='<div id="qj_box" class="widget" >';
    for(var i=0;i<10;i++){
      html += '<div id="box'+i+'" class="box" >'+i+'</div>';
    }
    html +='</div>';
    
    if($('#qj_box')[0] ==null ){
      $('body').append(html);
    }
    
    // 判断鼠标点击是由那个键触发的，1是左键，2是滚轮键，3是右键
    $('.box').mousedown(function(event){       
      if(event.which==3){
        var itemId=$(this).attr('id');
        showMenu(itemId);
      }else{
        closeMenu();
      }
    });
    
    // 左键点击关闭自定义菜单
    $(document).on('click',function(){
      closeMenu();
    });
  });
  
  // 屏蔽浏览器自带的右键
  document.οncοntextmenu=function(event){
    if($(event.target).attr('class')=='rk_menubox'){
      return false;
    }
  };
  
  // 弹出菜单代码
  function showMenu(itemId){     
    var mhtml='<div id="rk_menubox" class="rk_menubox">' +
        '<div class="rk_menuitem" οnclick="closeItem('+itemId+',1)">关闭此标签</div> ' +
        '<div class="rk_menuitem" οnclick="closeItem('+itemId+',2)">关闭其他标签</div> ' +
        '<div class="rk_menuitem" οnclick="closeItem('+itemId+',3)">关闭所有标签</div>'+
        '</div>';
    
    if($('#rk_menubox')[0]==null){
      $('body').append(mhtml);
    }

    var evt=window.event || arguments[0];
    
    // 获取鼠标右键按下后的位置,据此定义菜单显示的位置
    var rightedge=$('#rk_menubox').width()+evt.clientX;
    
    // 判断弹出的菜单是否有溢出浏览器窗口的宽度
    if(rightedge>$(window).width()){
      var _left=evt.clientX-$('#rk_menubox').width();      
      $('#rk_menubox').css({top:evt.clientY+'px',left:_left+'px'});
    }else{
      $('#rk_menubox').css({top:evt.clientY+'px',left:evt.clientX+'px'});
    }    
  }
  
  function closeMenu(){
    if($('#rk_menubox')[0]!=null){
      $('#rk_menubox').remove();
    }
  }
  
  function closeItem(tag,opt){
    var tagid=$(tag).attr('id');
    if(opt==1){
      $('#qj_box').children().filter('div[id='+tagid+']').remove();
    }else if(opt==2){
      $('#qj_box').children().not('div[id='+tagid+']').remove();
    }else if(opt==3){
      $('#qj_box').children().remove();
    }
  }

</script>

生成的html代码如下：

<body>
  <div id="qj_box" class="widget">
    <div id="box0" class="box">0</div>
    <div id="box1" class="box">1</div>
    <div id="box2" class="box">2</div>
    <div id="box3" class="box">3</div>
    <div id="box4" class="box">4</div>
    <div id="box5" class="box">5</div>
    <div id="box6" class="box">6</div>
    <div id="box7" class="box">7</div>
    <div id="box8" class="box">8</div>
    <div id="box9" class="box">9</div>
  </div>
</body>

样式CSS代码如下：

.widget{display:inline-block;background:#ff9900;}
.box{width:50px;height:50px;background:#00b7ee;margin:5px;float:left;}
        
.rk_menubox{width:100px;border:1px solid #ddd;position:absolute;z-index:999;background:#fff;}
.rk_menuitem{line-height:20px;cursor:pointer;padding:0px 5px;}
.rk_menuitem:hover{background:#f4f4f4;}

========= 完结 ===========