So implementieren Sie den Rechtsklick-Menüeffekt mithilfe von Javascript-js-Tutorial-php.cn

So implementieren Sie den Rechtsklick-Menüeffekt mithilfe von Javascript

小云云

Freigeben： 2018-03-15 16:46:21

Original

1499 Leute haben es durchsucht

Ich habe kürzlich das Kontextmenü-Attribut gesehen, als ich mir die erweiterte Programmierung von js angesehen habe. Es wird verwendet, um das Auftauchen der rechten Maustaste zu verhindern Ich habe plötzlich darüber nachgedacht und es heute ausprobiert. Dieses Attribut wird verwendet, um die folgenden Rechtsklick-Menüeffekte zu erzielen.

So implementieren Sie den Rechtsklick-Menüeffekt mithilfe von Javascript

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/page/index.css">
    <title>javascript实现右键菜单效果</title>
    <style>
        *{padding:0;margin:0;}
        .menu{display:none;position:fixed;width:125px;}
        .menu ul li{            height:30px;            width:120px;            margin-top:-1px ;            line-height:30px;            border:1px solid #eee; 
            text-align:center;            list-style:none;        }
        .menu ul li:hover{            background:#ccc;            cursor:default;            user-select: none;        }
    </style></head><body>
    <p class="menu">
       <ul>
           <li>导航菜单1</li>
           <li>导航菜单2</li>
           <li>导航菜单3</li>
           <li>导航菜单4</li>
       </ul>
    </p></body></html><script>

    function $(selector){
        return document.querySelectorAll(selector);
    }    var li = $(".menu ul li");    var menu = $(".menu")[0];    //右键菜单单击
    document.oncontextmenu = function(event){
        var ev = event || window.event;        var mX = event.clientX;        var mY = event.clientY;
        menu.style.display = "block";
        menu.style.left = mX + "px";
        menu.style.top = mY + "px";        return false;   //取消window自带的菜单弹出来
    }    //点击页面菜单消失
    document.onclick = function(){
        menu.style.display = "none";
    }    //阻止点击li冒泡
    for(var i = 0, len = li.length; i < len; i++ ){
        li.item(i).onclick = function(event){
            var ev = event || window.event;
            console.log(this.innerText);            if(ev.stopPropagation()){
                ev.stopPropagation();
            }else{
                ev.cancelBubble = false;
            }
        }
    }</script>

Nach dem Login kopieren

Verwandte Empfehlungen:

Angepasstes Rechtsklick-Menü Verwendung Teilen einfacher, von JS implementierter Beispiele

JS implementiert die Rechtsklick-Menüfunktion

Implementierung des Rechtsklick-Menüs und der Drag-and-Funktion -Drop-Funktion basierend auf JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Rechtsklick-Menüeffekt mithilfe von Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!