右键显示自己的菜单栏

这里主要使用H5 中的一个新 属性  contextmenu

话不多说,上代码

 1 
 2 <html>
 3 <head>
 4 	<title>title>
 5 	<style type="text/css">
 6 		.rightMenu{
 7 			width: 100px;
 8 			height: 100px;
 9 			border: 1px solid black;
10 			position: absolute;
11 			display: none;
12 		}
13 		.rightMenu li:hover{
14 			cursor: pointer;
15 		}
16 	style>
17 head>
18 <body>
19 <div class="rightMenu">
20 	<ul>
21 		<li>复制li>
22 		<li>粘贴li>
23 		<li>分享li>
24 	ul>
25 div>
26 <script type="text/javascript">
27     let rightMenu = document.querySelector('.rightMenu');
28 	document.addEventListener('contextmenu', ( event ) => {  //  监听右键事件
29 		event.preventDefault();                          //  阻止默认事件
30 		rightMenu.style.left = event.clientX + 'px';     //  很幸运的 右键点击提供了一系列的 参数,比如点击的 位置
31 		rightMenu.style.top = event.clientY + 'px';
32 		rightMenu.style.display = 'block';
33 		console.log('右键点击');
34 	})
35 	document.addEventListener('click', (event) => {          //  任意 左键 点击之后 让菜单消失
36 		rightMenu.style.display = 'none';
37 	})
38 
39 	let rightMenuLi = document.querySelector('.rightMenu ul');
40 	rightMenuLi.addEventListener('click', function (event) {
41 		console.log(event.target.textContent);           //  获取点击菜单 上的位置信息
42 	})
43 script>
44 body>
45 html>

很简单,主要就是  contextmenu 事件 能提供的 各种参数

右键显示自己的菜单栏_第1张图片


你可能感兴趣的:(前端,H5)