右键弹出菜单的实现

最新推荐文章于 2024-02-28 14:08:59 发布

wangzhantao

最新推荐文章于 2024-02-28 14:08:59 发布

阅读量100

点赞数

分类专栏： web 前端处理文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/wangzhantao/article/details/84394946

版权

web 前端处理专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<html>
<head>
 
<link href="menu.css" rel="stylesheet" type="text/css" />
	
</head>
<body  id="body">
 
  	
<div id="custom_menu" class="custom_menu">
	<div><a href="#">班级管理</a></div>
	<div><a href="#">人员管理</a></div>
	<div><a href="#">报名管理</a></div>
	<input type="button" value="关闭" οnclick="closeMenu(this)">
</div>	
  	
  	
  	<div id="useMenu" style="border:solid 1px red;padding: 2px">
    	<a href="javascript:void(0)" οncοntextmenu="pupMenu(this)">右键出菜单1</a> &nbsp;&nbsp;&nbsp;
  		<a href="javascript:void(0)" οncοntextmenu="pupMenu(this)">右键弹出菜单2</a>&nbsp;&nbsp;&nbsp;
  		<a href="javascript:void(0)" οncοntextmenu="pupMenu(this)">右键弹出菜单3</a>	
  	</div>

 
</body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
  <script language="javascript">

  
	$(function() {
 
		//菜单上 添加单击事件 
		$('#custom_menu').find('a').bind('click',function(){
			delayTimeFun();
		});;
	});
	
    // 菜单上 点击事件 
    function delayTimeFun(){
        //执行父页面跳转 
        //window.parent.location="/test/test_delayAfterTime.action?"+$('#form').serialize();
        alert("点击了确定按钮");
        return false;
    }
 
 

	 //创建弹出菜单
	function  pupMenu( obj ){
	   $('#custom_menu').css({top:$.pageY,left:$.pageX});
	   $('#custom_menu').show();
	   //还原其他链接背景色
	    $("a").css("background-color","white");
	   //当前点击链接背景色为red
       $(obj).css("background-color","red");
 
	}

    //隐藏菜单
    function closeMenu( obj ){
    	$(obj).parent().hide();	
    	//还原 链接背景色
 	    $("a").css("background-color","white");
    }

    window.onload = function(){
    	preventEvent(  $('#useMenu').get(0) );
        var useMenu = $('#useMenu').find('a');
		for(var i=0;i<useMenu.length ;i++  ){
			addEvent( useMenu.get(i));
		}
		
		// 阻止 右键弹出 
		function preventEvent(htmlObj ){
	        if(htmlObj.addEventListener){
	        	htmlObj.addEventListener("contextmenu",function(event){
	                event.preventDefault();
	            },false);
	        }else{
		       
	        	htmlObj.attachEvent("oncontextmenu",function(event){
	               event = event || window.event;
	               event.returnValue = false;
	             }
	            );
	        }
		}

		//给对象添加事件 
		function addEvent(htmlObj ){
	        if(htmlObj.addEventListener){
	        	htmlObj.addEventListener("contextmenu",function(event){
	        		event.preventDefault();
	                menucon(event);
	            },false);
	        }else{
	        	htmlObj.attachEvent("oncontextmenu",function(event){
	               event = event || window.event;
	               event.returnValue = false;
	               menucon(event,htmlObj);
	             }
	            );
	        }
		}
        //菜单位置处理
        function menucon(event,htmlObj){
			
     	   $('#custom_menu').css({top:(event.clientY-10),left:event.clientX});
    	   $('#custom_menu').show();
    	   //还原其他链接背景色
    	    $("a").css("background-color","white");
    	   //当前点击链接背景色为red
           $(htmlObj).css("background-color","red");
           
        }
        
}




    
</script>

</html>

wangzhantao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
右键弹出菜单的实现

&lt;html&gt;&lt;head&gt; &lt;link href="menu.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt;&lt;body id="body"&gt; &lt;div id=&qu
复制链接

扫一扫

专栏目录