zoukankan      html  css  js  c++  java
  • 17.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>
            .area1 {
                 200px;
                height: 200px;
                border: 1px solid #ccc;
                float: left;
                background: #008c8c
            }
    
            .area2 {
                 200px;
                height: 200px;
                border: 1px solid #ccc;
                float: right;
                background: #008c8c
            }
    
            .contain-text {
                position: fixed;
                left: 300px;
                top: 300px;
                border: 1px solid #ccc;
                background:#fff;
                display: none;
                padding:10px;
                text-align:left;
            }
    
            .contain-text ul {
                list-style: none;
                margin:0;
                padding:0;
            }
        </style>
    </head>
    
    <body>
        <div class="area1">
        </div>
        <div class="area2">
        </div>
    
        <div class="contain-text">
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
                <li>菜单4</li>
                <li>菜单5</li>
                <li>菜单6</li>
                <li>菜单7</li>
                <li>菜单8</li>
                <li>菜单9</li>
                <li>菜单10</li>
            </ul>
        </div>
        <script>
            var div1 = document.querySelector(".area1");
            var div2 = document.querySelector(".area2");
            var menu = document.querySelector(".contain-text");//菜单
            //注册自定义鼠标右键菜单事件
            div1.oncontextmenu = div2.oncontextmenu = function (e) {
                e.preventDefault();
                menu.style.display = "block";
                console.log(e.clientX, e.clientY);
                menu.style.left = e.clientX + "px";
                menu.style.top = e.clientY + "px";
            }
    
            window.onmousedown = function(){
                menu.style.display = "none";
            }
        </script>
    </body>
    
    </html>
    index.html

    效果展示:

  • 相关阅读:
    各种平衡树板子
    字符串板子
    数学公式/定理/板子整理
    线性筛 板子整理
    set乱搞时需注意的坑点
    可持久化数据结构板子整理(可持久化 线段树/字典树/可并堆)
    洛谷p2483 模板k短路 可持久化可并堆
    p4929 DLX舞蹈链
    百度ai 图像增强与特效
    百度ai php请求获取access_token返回false
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12794116.html
Copyright © 2011-2022 走看看