JavaScript实现点击自制菜单效果

本文实例为大家分享了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>
    

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• js 下拉菜单点击旁边收起实现(踩坑记)
• js实现二级菜单点击显示当前内容效果
• JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
• 简单实现js点击展开二级菜单功能
• js实现鼠标点击左上角滑动菜单效果代码
• js实现点击向下展开的下拉菜单效果代码
• CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
• js菜单点击显示或隐藏效果的简单实例
• Js点击弹出下拉菜单效果实例
• 下拉菜单点击实现连接跳转功能的js代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！