自定义鼠标右键功能,ie8及ie8以下不支持!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定义鼠标右键功能</title>
        <style>
        body, div, ul, li { margin:0; padding:0; }
        body { font:12px/1.5 \5fae\8f6f\96c5\9ed1; }
        ul { list-style-type:none; }
        #cen {font-size:36px; color:#60F; text-align:center;}
        #div1 { position:absolute; display:none; }
        #div1 ul { position:absolute; float:left; border:1px solid #979797;background:#f1f1f1; padding:2px; box-shadow:2px 2px 2px rgba(0, 0, 0, .6); width:230px; overflow:hidden; }
        #div1 ul li { float:left; clear:both; height:24px; cursor:pointer; line-height:24px; white-space:nowrap; padding:0 30px; width:100%; display:inline-block; }
        #div1 ul li:hover { background:#E6EDF6; border:1px solid #B4D2F6; }
        </style>
    </head>
    <body>
        
        <div id="div1">
              <ul>
                   <li onclick="openBaiDu()"><strong>打开百度</strong></li>
                   <li>关闭</li>
             </ul>
        </div>
        <script>
        document.oncontextmenu = function (ev){
        var oEvent=ev||event;
        var oDiv=document.getElementById('div1');   
        oDiv.style.display='block';
        oDiv.style.left=oEvent.clientX+'px';
        oDiv.style.left=oEvent.clientX+'px';
        oDiv.style.top=oEvent.clientY+'px';   
        return false;};
        
        document.onclick=function (){
        var oDiv=document.getElementById('div1');   
        oDiv.style.display='none';};
        
        function openBaiDu(){
            window.open("https://www.baidu.com","_self");
        }
        </script>
    </body>
</html>

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。