网络编程
位置：首页>> 网络编程>> JavaScript>> JavaScript实现点击自制菜单效果

JavaScript实现点击自制菜单效果

作者：~嘘~禁止想象~　　发布时间：2024-05-02 17:24:53　

标签：js,点击,菜单

本文实例为大家分享了JavaScript实现点击自制菜单效果的具体代码，供大家参考，具体内容如下

应用场景：当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时，需要阻止浏览器默认行为，并执行我们想要的效果

第一种方式，通过创建元素的方式


<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   body {
     height: 3000px;
   }

.menu {
     width: 100px;
     height: 280px;
     background-color: red;
     position: absolute;
     left: 0;
     top: 0;
     display: none;
   }
 </style>
</head>

<body>
 <script>
   var Bon = true;
   var menu = null;
   document.oncontextmenu = function(event) {
     if (Bon) {
       menu = document.createElement("div");
       menu.classList.add("menu");
       document.body.appendChild(menu);
       menu.style.left = event.pageX + "px";
       menu.style.top = event.pageY + "px";
       menu.style.display = "block";
       Bon = false;
       event.preventDefault();
     } else {
       menu.style.left = event.pageX + "px";
       menu.style.top = event.pageY + "px";
       event.preventDefault();
     }
   }

document.onmousedown = function(e) {
     if (e.button == 0) {
       var menu = document.querySelector(".menu");
       document.body.removeChild(menu);
       Bon = true;
     }
   }
 </script>
</body>

</html>

第二种：通过隐藏元素的方式


<div class="menu"></div>
<script>
   var menu = document.querySelector(".menu");
   document.oncontextmenu = function(event) {
     menu.style.left = event.pageX + "px";
     menu.style.top = event.pageY + "px";
     menu.style.display = "block";
     event.preventDefault();
   }
   document.onmousedown = function(e) {
     if (e.button == 0) {
       menu.style.display = "none";
     }
   }
</script>

当我们点击右键时就不会弹出默认的菜单了，弹出了我设置的红框框。

JavaScript实现点击自制菜单效果

来源：https://blog.csdn.net/weixin_45773503/article/details/113425737

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com