baiduife/contextmenu.html at master · dadaa1/baiduife · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>oncontextmenu</title>
	<style>
		html,body{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			background: red;
		}
		#menu{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			background: #fff;
			width: 200px;
			border:#808080 solid 1px;
			border-radius:10px;
			position: fixed;
			 display: none;
		}
		#menu>li{
			box-sizing: border-box;
			margin: 0;
			padding:0;
			list-style: none;
			height: 50px;
			border-bottom: 1px solid;
			text-align: center;
			line-height: 50px;
			font-size: 40px;
		}
		#menu>li:last-child{
			border-bottom: none;
		}
	</style>
</head>
<body>
<ul id="menu">
	<li id='menu1'>menu1</li>
	<li id='menu2'>menu2</li>
	<li id='menu3'>menu3</li>
</ul>
	<script>
	document.body.addEventListener("contextmenu", function(e){
		/*alert(screen.availWidth);*/
		e.preventDefault();
		var menu=document.getElementById('menu');
		menu.style.display="block";
		if(screen.availWidth-e.clientX<200){
			menu.style.left=e.clientX-200+"px";
		}else{
			menu.style.left=e.clientX+"px";
		}
		if(screen.availHeight-e.clientY<150){
			menu.style.top=e.clientY-150+"px";
		}else{
			menu.style.top=e.clientY+"px";
		}
	});
	document.body.addEventListener("click", function(e){
		var menu=document.getElementById('menu');
		if(e.target.tagName=='LI'){
			//alert('点击了menu')
			if(e.target.id=='menu1'){
				alert('1111')
			}
			if(e.target.id=='menu2'){
				alert('2222')
			}
			if(e.target.id=='menu3'){
				alert('3333')
			}
		}else{
			menu.style.display="none";
		}

	});
	</script>
</body>
</html>