Question

我试图构建自己的右键单击菜单我将绑定到管理员菜单的管理菜单之类的东西，但当我这样做时，当你右键单击鼠标时它会阻止我的普通浏览器菜单，我可以＆＃39;找出原因。

Javascript代码：

<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 {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;

        list-style: none;
        padding: 0;
        margin: 0;

        li {
            padding: 6px 12px;
            cursor: pointer;
                font-size: 12px;

                &:hover {
                    background-color: #DEF;
                }
        }
}

通过SCSS语法编写的CSS

$.admin_panel.run();

运行代码

{{1}}

当我点击这个admin_panel区域而不是其他地方时，它只能关闭。

Answer 1

仅在h2标记上显示您的上下文菜单，并且＆＃34;禁用＆＃34;只有在这种情况下，浏览器的常规上下文菜单才需要在return false;事件处理程序的末尾添加contextmenu。

所以你的代码应该是这样的：

＆＃13;

$(document).ready(function(){
  $.admin_panel.run();
});


$.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"
             });
          
          return false;
        });
    },

    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;
        }
    });
    }
};

＆＃13;

.admin_panel_menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;

        list-style: none;
        padding: 0;
        margin: 0;

        li {
            padding: 6px 12px;
            cursor: pointer;
                font-size: 12px;

                &:hover {
                    background-color: #DEF;
                }
        }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

jQuery右键单击功能块正常菜单

1 个答案: