zoukankan      html  css  js  c++  java
  • HTML5事件——contextmenu 隐藏鼠标右键菜单

    在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单。
    首先先写一个自己的菜单:

    <style>
            ul, li {
                margin: 0;
                padding: 0;
            }
    
            #myMenu{
                list-style: none;
                width: 150px;
                border: 1px solid #ccc;
                border-bottom: none;
                position: absolute;
                display: none;
            }
    
            #myMenu li{
                border-bottom: 1px solid #ccc;
                padding: 5px 10px;
                cursor: pointer;
            }
    
            #myMenu li:hover{
                background-color: #ccc;
            }
        </style>
    <ul id="myMenu">
        <li>右键想干什么?</li>
        <li>想看源码?</li>
        <li>还是想审查元素?</li>
    </ul>

    显示时就是这个样子:
    这里写图片描写叙述

    然后为document加入contextmenu事件,再取消掉其默认事件,让自己定义菜单显示出来:

    var myMenu = document.getElementById("myMenu");
    document.addEventListener("contextmenu", function(event){
        event.preventDefault();
        myMenu.style.display = "block";
        //获取鼠标视口位置
        myMenu.style.top = event.clientY + "px";
        myMenu.style.left = event.clientX + "px";
    });

    当然,用户在别的地方单击记得隐藏菜单:

    document.addEventListener("click", function(event){
        myMenu.style.display = "none";
    });

    通过给自己定义菜单设置更好看的css将有更好的效果。
    这里写图片描写叙述

  • 相关阅读:
    SpringBoot分布式篇Ⅷ --- 整合SpringCloud
    SpringBoot分布式篇Ⅶ --- 整合Dubbo
    java.lang.IllegalArgumentException: There is no PasswordEncoder mapped for the id "null"
    小学数学题
    GoLang GRPC使用
    GoLang Socket 聊天实例
    golang Redis运用
    go mod 运用
    Golang Socket编程小实例
    GoLang协程和管道
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5287316.html
Copyright © 2011-2022 走看看