jQuery right click function block normal menu

Question

I have trying to build my own right click menu I will bind to stuff like as a admin menu for admins, but when I do it its block my normal browser menu when you right click on your mouse, I can't find out of why.

Javascript code:

$.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;
        }
    });
    }
};

HTML Code:

<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>

CSS by SCSS syntax

.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;
                }
        }
}

Run the code

$.admin_panel.run();

Its shut only work when i click on this admin_panel area, not orther place.

Could it be because of that call to event.preventDefault()? — Frédéric Hamidi
– Frédéric Hamidi, Commented May 27, 2016 at 7:53
no prevent not do eny deffriend, and i have now updated the code. — ParisNakitaKejser
– ParisNakitaKejser, Commented May 27, 2016 at 8:00
Can you post the complete JS code, please ? It seems there's something's missing like binding between your HTML and admin_panel — ADreNaLiNe-DJ
– ADreNaLiNe-DJ, Commented May 27, 2016 at 8:04
Thanks for the edit. But are you sure that you have posted enough code ? I've tested what you posted and the normal context menu of the browser is displayed everytime anywhere on the page (IE11) — ADreNaLiNe-DJ
– ADreNaLiNe-DJ, Commented May 27, 2016 at 8:11

ADreNaLiNe-DJ · Accepted Answer · 2016-05-27 08:32:55Z

For showing your context menu only on the h2 tag and "disabling" the normal context menu of the browser only in this case, you only have to add return false; in the end of your contextmenu event handler.

So your code should look like this:

$(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;
        }
    });
    }
};

.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;
                }
        }
}

<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>

Thanks a lot, so awsome to know :) now i have a cool day agin, thanks by you :D

Collectives™ on Stack Overflow

jQuery right click function block normal menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related