layui鼠标右键点击事件

最新推荐文章于 2024-10-23 14:37:15 发布

u010082526

最新推荐文章于 2024-10-23 14:37:15 发布

阅读量6.5k

点赞数

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/u010082526/article/details/89473663

版权

layui 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在layui框架中如何处理鼠标右键点击事件，详细介绍了如何引入相关JS文件并进行调用来实现在桌面环境下监听并响应右键点击操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$('.site-demo-active').on('contextmenu', function () {
                    if (flag == 1) {
                        layer.open({
                            title: "修改资源目录",
                            btn: ['确定', '取消'],
                            //type: 1,
                            content: "设置到公开资源目录下" //注意，如果str是object，那么需要字符拼接。
                        });
                    }
                    else {
                        layer.open({
                            title: "修改资源目录",
                            btn: ['确定', '取消'],
                            //type: 1,
                            content: "从公开资源目录下移除" //注意，如果str是object，那么需要字符拼接。
                        });
                    }
                });

桌面的鼠标右键点击也会一起出来

引用js文件，并调用contextMenu

$(".site-demo-active").contextMenu({
		        //jquery.contextMenu.min.js里的方法，屏蔽桌面鼠标右键点击
		    });

!function (t, n, i, e) {
    var o = function (t, n) { this.init(t, n) };
    o.prototype = {
        init: function (t, n) {
            this.ele = t,
            this.defaults = {
                menu: [{
                    text: "菜单一", callback: function () { }
                }],
                target: function (t) {
                },
                width: 100, itemHeight: 28, bgColor: "#fff", color: "#333", fontSize: 14,
                hoverColor: "none", hoverBgColor: "#f5f5f5"
            },
            this.opts = i.extend(!0, {}, this.defaults, n),
            this.random = (new Date).getTime() + parseInt(1e3 * Math.random()), this.eventBind()
        },
        renderMenu: function () {
            var t = this, n = "#uiContextMenu_" + this.random;
            if (!(i(n).size() > 0)) {
                var e = this.opts.menu, o = '<ul class="ui-context-menu" id="uiContextMenu_' + this.random + '">';
                i.each(e, function (t, n) {
                    n.icon ? o +=
                        '<li class="ui-context-menu-item"><a href="javascript:void(0);"><img class="icon" src="'
                        + n.icon + '"/><span>' + n.text + "</span></a></li>" : o
                        += '<li class="ui-context-menu-item"><a href="javascript:void(0);"><span>'
                        + n.text + "</span></a></li>"
                }),
                o += "</ul>", i("body").append(o).find(".ui-context-menu").hide(),
                this.initStyle(n), i(n).on("click", ".ui-context-menu-item", function (n) {
                    t.menuItemClick(i(this)), n.stopPropagation()
                })
            }
        },
        initStyle: function (t) {
            var n = this.opts; i(t).css({
                width: n.width, backgroundColor: n.bgColor
            }).find(".ui-context-menu-item a").css({
                color: n.color, fontSize: n.fontSize, height: n.itemHeight, lineHeight: n.itemHeight + "px"
            }).hover(function () {
                i(this).css({ backgroundColor: n.hoverBgColor, color: n.hoverColor })
            }, function () {
                i(this).css({ backgroundColor: n.bgColor, color: n.color })
            })
        }, menuItemClick: function (t) {
            var n = this, i = t.index();
            t.parent(".ui-context-menu").hide(),
            n.opts.menu[i].callback && "function" == typeof n.opts.menu[i].callback && n.opts.menu[i].callback()
        }, setPosition: function (t) {
            i("#uiContextMenu_" + this.random).css({ left: t.clientX + 2, top: t.clientY + 2 }).show()
        },
        eventBind: function () {
            var t = this;
            this.ele.on("contextmenu", function (n) {
                n.preventDefault(),
                t.renderMenu(),
                t.setPosition(n),
                t.opts.target && "function" == typeof t.opts.target && t.opts.target(i(this))
            }), i(n).on("click", function () {
                i(".ui-context-menu").hide()
            })
        }
    }, i.fn.contextMenu = function (t) { return new o(this, t), this }
}(window, document, jQuery);