zoukankan      html  css  js  c++  java
  • 实现右键自定义菜单

    <!DOCTYPE html>

    <html>

     

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    #menu {

    height: 200px;

    width: 50px;

    border: 1px solid gray;

    background-color: antiquewhite;

    padding: 10px;

    display: none;

    position: absolute;

    }

     

    ul,

    li {

    margin: 0;

    padding: 0;

    list-style-type: none;

    line-height: 40px;

    }

    </style>

    </head>

     

    <body>

    <div id="menu">

    <ul>

    <li>复制</li>

    <li>粘贴</li>

    <li>运行</li>

    <li>工具</li>

    <li>帮助</li>

    </ul>

    </div>

    </body>

    <script type="text/javascript">

    var menu = document.getElementById("menu");

    document.oncontextmenu = function(ev) {

    var oEvent = ev || event;

    //自定义的菜单显示

    menu.style.display = "block";

    //让自定义菜单随鼠标的箭头位置移动

    menu.style.left = oEvent.clientX + "px";

    menu.style.top = oEvent.clientY + "px";

    //return false阻止系统自带的菜单,

    //return false必须写在最后,否则自定义的右键菜单也不会出现

    return false;

     

    }

    //实现点击document,自定义菜单消失

    document.onclick = function() {

     

    menu.style.display = "none";

    }

    </script>

     

    </html>

  • 相关阅读:
    使用JavaScript获取select元素选中的value和text
    EF应用一:Code First模式
    EF常用查询语句
    在EF中执行SQL语句
    c++学习笔记之继承篇
    pyqt系列原创入门教程
    python sorted排序用法详解
    常见排序算法-Python实现
    作品集
    deepin系统如何安装deb格式的软件
  • 原文地址:https://www.cnblogs.com/niuniudashijie/p/6127617.html
Copyright © 2011-2022 走看看