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

最新推荐文章于 2024-05-17 09:23:02 发布

shliu2333

最新推荐文章于 2024-05-17 09:23:02 发布

阅读量8.5k

点赞数 1

分类专栏： jQuery html 文章标签：自定义右键菜单获取页面选中文本内容

本文链接：https://blog.csdn.net/m0_37578731/article/details/78773589

版权

jQuery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

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

网上查阅尝试了很多方式，选择了一个较为简洁的方式实现，代码很少，进行细节调整后发现存在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.οncοntextmenu=function的事件在IE中会有兼容性问题，无法进入事件，但也不报错。包括对选中文本内容的获取，三目运算的写法也是为了解决兼容性问题。

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

shliu2333

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
屏蔽浏览器右键菜单功能，自定义右键菜单（兼容IE8）

做了个自定义右键菜单的功能，和获取选中文本内容相关，一起记录一下。网上查阅尝试了很多方式，选择了一个较为简洁的方式实现，代码很少，进行细节调整后发现存在IE8兼容性问题，又查阅资料后进行了优化，目前可以完美兼容IE8，但注意jQuery版本必须1.7+，我这里用的1.8.3版本。<!DOCTYPE html><html> <head> <meta charset="utf-
复制链接

扫一扫