屏蔽浏览器右键菜单功能，自定义右键菜单（兼容IE8）

来源：互联网发布：linux 避免别人误删编辑：程序博客网时间：2024/06/16 08:58

做了个自定义右键菜单的功能，和获取选中文本内容相关，一起记录一下。

网上查阅尝试了很多方式，选择了一个较为简洁的方式实现，代码很少，进行细节调整后发现存在IE8兼容性问题，又查阅资料后进行了优化，目前可以完美兼容IE8，但注意jQuery版本必须1.7+，我这里用的1.8.3版本。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script src="js/jquery-1.8.3.js"></script>        <style type="text/css">            /*css代码*/            #menu{                width: 0; /*设置为0 隐藏自定义菜单*/                overflow: hidden; /*隐藏溢出的元素*/                box-shadow: 0 1px 1px #888,1px 0 1px #ccc;                position: absolute; /*自定义菜单相对与body元素进行定位*/                background-color: white;            }            .menu{                width: 130px;                line-height: 25px;                padding: 0 10px;            }        </style>        <script>            var str = "";            $(function() {                $(document).on('contextmenu', function(e) {                     str = window.getSelection?window.getSelection().toString():document.selection.createRange().text;                    if(str == ""){                        return;                    }                    //获取我们自定义的右键菜单                    var menu=document.querySelector("#menu");                    //加上滚动条的高度                    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;                    //根据事件对象中鼠标点击的位置，进行定位                    menu.style.left=e.clientX+'px';                    menu.style.top=e.clientY+scrollTop+'px';                    //改变自定义菜单的宽，让它显示出来                    menu.style.width='95px';                    return false;                });             });            //关闭右键菜单，很简单            document.onclick=function(e){                //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能            　　　　document.querySelector('#menu').style.width=0;            }            $(document).ready(function(){                $('#searchQXJS').click(function(){                    console.info('选中的文本为：' + str);                });            });        </script>    </head>    <body>        <div>所以，我们要做的就是，在触发contextmenu事件时，取消掉默认行为(也就是阻止浏览器显示自带的菜单)通过传入的事件对象，来确定鼠标的点击位置，作为left和top的值来进行元素的定位，并显示自定义菜单</div>        <!--自定义右键菜单html代码-->        <div id="menu">            <div class="menu" id="searchQXJS" style="cursor: pointer;">选中文本</div>        </div>    </body></html>

这里我对浏览器自带右键菜单的屏蔽是在选中了文字的情况下，没有选中文字时右键不会出现自定义菜单，而依旧是浏览器自带右键功能。

$(document).on的事件定义方式是为了兼容IE8，很多网上的document.oncontextmenu=function的事件在IE中会有兼容性问题，无法进入事件，但也不报错。包括对选中文本内容的获取，三目运算的写法也是为了解决兼容性问题。

效果如下：
右键菜单效果
获取选中的文本内容

阅读全文

0 0