ブラウザの右クリックメニューをカスタマイズし、右クリックして表示します.

1628 ワード

CSS
#menu{
            width: 200px;
            line-height: 30px;
            text-align: center;
            background: #ccc;
            position: absolute;
            left: 0;
            top: 0;
        }
HTML
 
JS

        //      
        document.oncontextmenu=function(event){
            let menu=document.querySelector("#menu");
            //        
            menu.style.display="block";
            //  
            var e=event || window.event;
            //           
            let x=e.clientX;
            let y=e.clientY;
            //console.log(x,y);
            menu.style.left=x+"px";
            menu.style.top=y+"px";
            //      
            e.preventDefault();
        }
        //      
        document.onclick=function(){
            let menu=document.querySelector("#menu");
            menu.style.display="none";
        }