recherche

Maison  >  Article  >  interface Web  >  Comment implémenter l'effet de menu contextuel à l'aide de javascript

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

小云云
小云云original
2018-03-15 16:46:211479parcourir

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

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter une chaîne inversée en javascriptArticle suivant：Comment implémenter une chaîne inversée en javascript

Articles Liés

Voir plus