Javascript jQuery右键单击功能块普通菜单

我试图建立我自己的右键菜单，我将绑定到类似管理员菜单的东西，但当我这样做时，当你右键单击鼠标时，它会阻止我的正常浏览器菜单，我不知道为什么

Javascript代码：

$.admin_panel = {
menu: {
    product: function(product_uuid) {
        console.log('product');

        $(document.createElement('ul'))
        .attr({
            'id' : 'admin_panel-product-'+ product_uuid
        })
        .addClass('admin_panel_menu')
        .append(
            $(document.createElement('li'))
            .append(
                $(document.createElement('a'))
                .attr({
                    'href' : '{backend url}/'+ product_uuid,
                    'target' : '_Blank'
                })
                .html('Edit via backend')
            )
        )
        .appendTo('body');

        $.admin_panel.tricker.bindEvent('#admin_panel-product-'+ product_uuid);
        $.admin_panel.tricker.mousedownEvent('#admin_panel-product-'+ product_uuid);
        $.admin_panel.tricker.clickEvent('#admin_panel-product-'+ product_uuid);
    }
},

tricker: {
    bindEvent: function(menu_id) {
        console.log('bindEvent');

        $('.admin_panel').bind('contextmenu', function (event) {
            //  event.preventDefault();

             $(menu_id).finish().toggle(100).

             css({
                     top: event.pageY + "px",
                     left: event.pageX + "px"
             });
        });
    },

    mousedownEvent: function(menu_id) {
        console.log('mousedownEvent');

        $(document).bind("mousedown", function (e) {
            if (!$(e.target).parents(menu_id).length > 0) {
                $(menu_id).hide(100);
            }
        });
    },

    clickEvent: function(menu_id) {
        console.log('clickEvent');

        $(menu_id +" li").click(function(){
        $(menu_id).hide(100);
      });
    }
},

run: function() {
    console.log('Admin panel run! :)');

    $.each($('.admin_panel'), function(index, value) {
        switch(true) {
            case $(value).hasClass('admin_panel_product'):
                $.admin_panel.menu.product($(value).data('product-uuid'));
                break;
        }
    });
    }
};

<h1 class="h2 admin_panel admin_panel_product admin_panel_obj_b6672e48-a99f-49f4-a46b-8197686c8935" data-product-uuid="b6672e48-a99f-49f4-a46b-8197686c8935">product title here</h1>

HTML代码：

$.admin_panel = {
menu: {
    product: function(product_uuid) {
        console.log('product');

        $(document.createElement('ul'))
        .attr({
            'id' : 'admin_panel-product-'+ product_uuid
        })
        .addClass('admin_panel_menu')
        .append(
            $(document.createElement('li'))
            .append(
                $(document.createElement('a'))
                .attr({
                    'href' : '{backend url}/'+ product_uuid,
                    'target' : '_Blank'
                })
                .html('Edit via backend')
            )
        )
        .appendTo('body');

        $.admin_panel.tricker.bindEvent('#admin_panel-product-'+ product_uuid);
        $.admin_panel.tricker.mousedownEvent('#admin_panel-product-'+ product_uuid);
        $.admin_panel.tricker.clickEvent('#admin_panel-product-'+ product_uuid);
    }
},

tricker: {
    bindEvent: function(menu_id) {
        console.log('bindEvent');

        $('.admin_panel').bind('contextmenu', function (event) {
            //  event.preventDefault();

             $(menu_id).finish().toggle(100).

             css({
                     top: event.pageY + "px",
                     left: event.pageX + "px"
             });
        });
    },

    mousedownEvent: function(menu_id) {
        console.log('mousedownEvent');

        $(document).bind("mousedown", function (e) {
            if (!$(e.target).parents(menu_id).length > 0) {
                $(menu_id).hide(100);
            }
        });
    },

    clickEvent: function(menu_id) {
        console.log('clickEvent');

        $(menu_id +" li").click(function(){
        $(menu_id).hide(100);
      });
    }
},

run: function() {
    console.log('Admin panel run! :)');

    $.each($('.admin_panel'), function(index, value) {
        switch(true) {
            case $(value).hasClass('admin_panel_product'):
                $.admin_panel.menu.product($(value).data('product-uuid'));
                break;
        }
    });
    }
};

<h1 class="h2 admin_panel admin_panel_product admin_panel_obj_b6672e48-a99f-49f4-a46b-8197686c8935" data-product-uuid="b6672e48-a99f-49f4-a46b-8197686c8935">product title here</h1>

运行代码

$.admin_panel.run();

---

只有当我点击这个管理面板区域，而不是其他位置时，它才会关闭。

如果仅在

h2

标签上显示上下文菜单，并且仅在这种情况下“禁用”浏览器的正常上下文菜单，您只需添加

返回false上下文菜单的末尾添加code>

因此，您的代码应该如下所示：


$（文档）.ready（函数（）{
$.admin_panel.run（）；
});
$.admin_面板={
菜单：{
产品：功能（产品编号）{
console.log（“产品”）；
$（document.createElement（'ul'））
艾特先生({
“id”：“管理面板-产品-”+产品id
})
.addClass（“管理面板菜单”）
.附加(
$（document.createElement（'li'））
.附加(
$（document.createElement（'a'））
艾特先生({
'href'：'{backend url}/'+product_uuid，
“目标”：“空白”
})
.html（'通过后端编辑'）
)
)
.附于（“主体”）；
$.admin_panel.tricker.bindEvent（“#admin_panel-product-”+product_uuid）；
$.admin_panel.tricker.mousedownEvent（“#admin_panel-product-”+product_uuid）；
$.admin_panel.tricker.clickEvent（“#admin_panel-product-”+product_uuid）；
}
},
骗子：{
bindEvent:函数（菜单id）{
console.log（'bindEvent'）；
$（'.admin_panel'）.bind（'contextmenu'，函数（事件）{
//event.preventDefault（）；
$（菜单id）.finish（）.toggle（100）。
css({
顶部：event.pageY+“px”，
左：event.pageX+“px”
});
返回false；
});
},
mousedownEvent:功能（菜单id）{
console.log（'mousedownEvent'）；
$（文档）.bind（“mousedown”，函数（e）{
如果（！$（e.target）.parents（菜单id）.length>0{
$（菜单id）.hide（100）；
}
});
},
clickEvent:功能（菜单\u id）{
console.log（'clickEvent'）；
$（菜单id+“li”）。单击（函数（）{
$（菜单id）.hide（100）；
});
}
},
运行：函数（）{
log（'Admin panel run！：）'）；
$.each（$（'.admin_panel'），函数（索引，值）{
开关（真）{
案例$（值）.hasClass（'admin\u panel\u product'）：
$.admin_panel.menu.product（$（value.data（'product-uuid'））；
打破
}
});
}
};
.admin\u面板\u菜单{
显示：无；
z指数：1000；
位置：绝对位置；
溢出：隐藏；
边框：1px实心#CCC；
空白：nowrap；
字体系列：无衬线；
背景：#FFF；
颜色：#333；
边界半径：5px；
列表样式：无；
填充：0；
保证金：0；
李{
填充：6px 12px；
光标：指针；
字体大小：12px；
&：悬停{
背景色：#DEF；
}
}
}

这里的产品标题
可能是因为调用了
event.preventDefault（）
？也发布一些
html
！！不，不，不，不，我已经更新了代码。你能发布完整的JS代码吗？似乎缺少了一些东西，比如HTML和
管理面板之间的绑定
谢谢您的编辑。但是你确定你已经发布了足够的代码吗？我已经测试了你发布的内容，浏览器的普通上下文菜单每次都会显示在页面的任何位置（IE11）非常感谢，所以我想知道：）现在我又过了一个凉爽的一天，谢谢你：D