jquery 自定义右键


jq实现自定义右键功能

前情提要

禁止原右键 审查元素等功能 实现自定义右键

html页面代码

<!--
    作者:1906244925@qq.com
    时间:2021-02-25
    描述:禁止原鼠标右键 并修改功能
    博客:https://bree.vip
-->
<!DOCTYPE html>
<html xml:lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>修改右键功能</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div style="text-align: center">
    <img src="https://ae01.alicdn.com/kf/Udf6e238390df455986c59d123343e16dd.jpg" class="xzimges">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/mouseRight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

引入css文件

.shade {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;

}

.wrap-ms-right {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 0;
    min-width: 80px;
    z-index: 1;
    margin: 0;
    display: none;
    font-family: "微软雅黑";
    font-size: 14px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ms-item {
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.ms-item:hover {
    background-color: #343a40;
    color: #FFFFFF;
}

body {
    width: 1200px;
    height: 500px;
    overflow: hidden;
}

.xzimges {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    border-radius: 50%;
    position: relative;
    animation: rotating 1.2s linear infinite;
    -webkit-animation: rotating 20s infinite; /*Safari and Chrome*/
}


@keyframes rotating {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

引入mouseRight.min.js

;(function ($, window) {
    $.prototype.mouseRight = function (options, callback) {
        var defaults, settings, me, _this;
        me = this;
        defaults = {menu: [{}], ele: 'body'};
        settings = $.extend({}, defaults, options);
        $(this).each(function () {
            (function () {
                var parentDiv = $('<div></div>');
                parentDiv.attr('class', 'wrap-ms-right');
                for (let i = 0; i < settings.menu.length; i++) {
                    var childDiv = $('<li></li>');
                    childDiv.addClass('ms-item');
                    var childDiv1 = $('<i></i>');
                    childDiv.attr('data-item', i);
                    childDiv1.addClass(settings.menu[i].icon);
                    childDiv1.attr('data-item', i);
                    childDiv1.appendTo(childDiv);
                    childDiv.appendTo(parentDiv);
                    childDiv1.after('&nbsp; ' + settings.menu[i].itemName)
                }
                parentDiv.prependTo('body');
                var parentShade = $('<div></div>');
                parentShade.attr('class', 'shade');
                parentShade.prependTo('body')
            })();
            window.oncontextmenu = function () {
                return false
            };
            $(settings.ele).mousedown(function (e) {
                if (e.which === 3) {
                    $('.wrap-ms-right').css({'display': 'block', 'top': e.pageY + 'px', 'left': e.pageX + 'px'});
                    $('.shade').css({'display': 'block'})
                }
            });
            $('.ms-item').click(function (e) {
                var clickID = parseInt($(e.target).attr('data-item'));
                for (let i = 0; i < settings.menu.length; i++) {
                    if (clickID == i) {
                        settings.menu[i].callback();
                        $('.wrap-ms-right').css({'display': 'none'});
                        $('.shade').css({'display': 'none'})
                    }
                }
            });
            $('.shade').click(function () {
                $('.wrap-ms-right').css({'display': 'none'});
                $('.shade').css({'display': 'none'})
            })
        });
        return this
    }
})(jQuery, window)

引入index.js

$('body').mouseRight({
        menu: [{
            itemName: "添加",
            icon: "fa fa-plus",
            callback: function () {可自定义点击后的事件}
        }, {
            itemName: "修改",
            icon: "fa fa-files-o",
            callback: function () {可自定义点击后的事件}
        }, {
            itemName: "粘贴",
            icon: "fa fa-clipboard",
            callback: function () {可自定义点击后的事件}
        }, {
            itemName: "删除",
            icon: "fa fa-trash",
            callback: function () {可自定义点击后的事件}
        }]
    });

文章作者: 柒仔
文章链接: /article/29/
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 XiaoLiu!
侵权声明: 若无意对您的文章造成侵权,请您留言,博主看到后会及时处理,谢谢。
评论-----昵称和邮箱必填,网址选填
  目录