右键

最新推荐文章于 2019-03-20 23:29:17 发布

dongsdh

最新推荐文章于 2019-03-20 23:29:17 发布

阅读量165

点赞数 1

分类专栏：第三方-Ztree(右键菜单)

第三方-Ztree(右键菜单) 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title>鼠标右键事件</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.box{
				position: relative;
			}
			p {
				height: 60px;
				width: 220px;
				background-color: #888888;
				text-align: center;
				line-height: 60px;
			}
			
			#ul {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #FF0000;
				z-index: 2;
			}
			#ul li{list-style: none;}
			
		</style>
	</head>
 
	<body>
 		
 		<div class="box">
	 			<p id="tar1">这里是一些内容1
	 			</p>
	 			<p id="tar2">这里是一些内容2
	 			</p>
	 			<p id="tar3">这里是一些内容3
	 			</p>
	 			<ul id="ul" style="display: none;">
	 				<li>选项1</li>
	 				<li>选项2</li>
	 				<li>选项3</li>
	 			</ul>
 			
 		</div>
 	<script src="jquery.min.js"></script>
		<script>
			$(".box").on("contextmenu", function(){
	            return false;
	        })
			var x,y;
			$('.box').mousemove(function(e) { 
				var xx = e.originalEvent.x || e.originalEvent.layerX || 0; 
				var yy = e.originalEvent.y || e.originalEvent.layerY || 0; 
//				$(this).text(xx + '---' + yy); 
				x=xx;
				y=yy;
			}); 
			
			
			var _this;
			$("p").mousedown(function(e) {
		      console.log(e.which);
		      _this=$(this);
//		      //右键为3
		      if (3 == e.which) {
		      	$("ul").show();
		      	$("ul").css("top",y);
		      	$("ul").css("left",x);
		      }
		        $(this).attr("contenteditable",true);
//				var el = document.getElementById("#tar");
//				var oMenu = document.getElementById("ul");
//				
//				
//				el.oncontextmenu = function(e) {
//					
//					var _x = e.clientX,
//					_y = e.clientY;
//					oMenu.style.display = "block";
//							oMenu.style.left = _x + "px";
//							oMenu.style.top = _y + "px";
//				}
		      else if (1 == e.which) {
		        $("#ul").hide();
		      }
		    })
			$("#ul li").click(function(){
//				console.log($(this).text())
				$(_this).attr("contenteditable",true);
				$(_this).focus();
				$(_this).scrollLeft=700;
				$("input").focus();//使input获取焦点
				$("#ul").hide();
			});
			/*$('body').click(function(event){
				getMousePos(event)
			})
			function getMousePos(event) {
			      var e = event || window.event;
			      return {'x':e.clientX,'y':clientY}
			}*/
//			$("ul").on("click","",function(){
//			  console.log(1);
//			})
		</script>
	</body>
 
</html>