<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content=""> <meta content=""> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> #demo1 { display: block; background-color: turquoise; color: #fff; font-size: 50px; text-align: center; width: 100%; height: 500px; } #click-pos { display: block; background-color: bisque; color: #000; margin: 20px; float: left; min-width: 200px; font-size: 20px; text-align: center; } /* 右键菜单遮罩层 */ #layer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; } #mouse-menu { position: fixed; z-index: 5; left: 0; right: 0; width: 130px; max-height: 120px; overflow: auto; display: block; background-color: #f1ecec; list-style: none; padding: 10px; text-align: center; border-radius: 8px; box-shadow: 0 0 4px #ddd; } /* 菜单的每个选项 */ #mouse-menu li { border-top: 1px solid #000; } #mouse-menu li:last-child { border-bottom: 1px solid #000; } /* 当鼠标移入时 */ #mouse-menu li:hover { background-color: deepskyblue; } </style> </head> <label> 显示内容 </label> <div> <p>在此区域启用自定义菜单,原菜单已禁用</p> </div> <!-- 最外层为遮罩层,用于绑定点击任意位置关闭菜单事件 --> <!-- 默认隐藏 --> <div> <ul> <li>选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> <li>选项卡4</li> <li>选项卡5</li> <li>选项卡6</li> </ul> </div> <body> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script> //禁用掉区域的默认右键事件 $('#demo1').on('contextmenu', function () { return false; }) $('#layer').on('contextmenu', function () { return false; }) $('#demo1').on('mousedown', function (event) { var code = event.which; var x = event.pageX;//相对于页面左上角X的坐标 var y = event.pageY;//相对于页面左上角Y的坐标 var mouse = "";//点击类型 switch (code) { case 1: mouse = "左键"; break; case 2: mouse = "中键(滚轮)"; break; case 3: mouse = "右键"; break; default: break; } $('#click-pos').html("点击类型:" + mouse + "--位置-X:" + x + '-Y:' + y);//坐标显示到页面上 // 如果是鼠标右键召唤出弹出菜单 if (code == 3) { $('#layer').show(); //改变菜单的位置到事件发生的位置 $('#mouse-menu').css('left', x); $('#mouse-menu').css('top', y); } }) // 点击选项卡时触发 $('#layer').on('click', 'li', function (event) { //显示当前点击的内容 console.log("ssss"); var text = $(this).html(); $('#click-pos').html(text); // event.stopPropagation();//阻止事件冒泡 }) //点击遮罩层时隐藏需要的菜单 $('#layer').on('click', function () { $(this).hide(); }) </script> </body> </html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: