對div實現右鍵彈出自定義選單
阿新 • • 發佈：2019-02-01
實現只對藍色的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.oncontextmenu=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" onclick="closeItem('+itemId+',1)">關閉此標籤</div> ' + '<div class="rk_menuitem" onclick="closeItem('+itemId+',2)">關閉其他標籤</div> ' + '<div class="rk_menuitem" onclick="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程式碼如下：
樣式CSS程式碼如下：<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>
.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;}
========= 完結 ===========