Comment implémenter l'effet de menu contextuel à l'aide de javascript-js tutoriel-php.cn

Comment implémenter l'effet de menu contextuel à l'aide de javascript

小云云

Libérer： 2018-03-15 16:46:21

original

1483 Les gens l'ont consulté

J'ai soudainement vu l'attribut contextmenu lorsque je regardais la programmation avancée js récemment. Je l'ai déjà rencontré lors de projets. Il est utilisé pour empêcher le bouton droit de la souris d'apparaître (ps : interdire aux autres de copier). J'y ai soudainement pensé et je l'ai essayé aujourd'hui. Cet attribut est utilisé pour obtenir les effets de menu contextuel suivants.

Comment implémenter leffet de menu contextuel à laide de 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>

Copier après la connexion

Recommandations associées :

Menu contextuel personnalisé utilisation Partage d'exemples simples implémentés par JS

JS implémente la fonction de menu contextuel

Implémentation du menu contextuel et du glisser-déposer -fonction drop basée sur JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!