js之自定義鼠標右鍵菜單


自定義右鍵菜單

讓原有的鼠標右鍵消失,自己定義鼠標右鍵菜單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul,li{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            ul{
                display: none;
                position: absolute;
                background: cyan;
            }
            li{
                height: 20px;
                width: 50px;
                
            }
            li:hover{
                background: burlywood;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                document.oncontextmenu=function(ev){
                    var clintX=ev.clientX;  //ev獲取的只是屏幕可視范圍的x,y值
                    var clintY=ev.clientY;
                    var scollTop=document.documentElement.scrollTop|| document.body.scrollTop;   //當有下拉條的時候必須加上當前屏幕不可視范圍的left,和top值
                    var scollLeft=document.documentElement.scrollLeft || document.body.scrollLeft
                    document.getElementsByTagName('ul')[0].style.left=clintX+scollLeft+'px';
                    document.getElementsByTagName('ul')[0].style.top=clintY+scollTop+'px';
                    document.getElementsByTagName('ul')[0].style.display='block';
                    return false;  //阻止鼠標右鍵菜單出現
                }
            }
        </script>
    </head>
    <body style="height: 2000px;">
        <ul>
            <li>復制</li>
            <li>粘貼</li>
            <li>全選</li>
            <li>刪除</li>
        </ul>
    </body>
</html>


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com