How to trigger contextmenu on left mouse button cl

Question

I'm trying to use contextmenu for the left menu button click but it's not working:

<input type="button" id="selector"  value="click" />

jquery:

$('#selector').on('click',function(){
 $(this).triggerHandler('contextmenu')   
});

How should I implement?

Please check this is not working fiddle

Please note: I want to use default contextmenu on left click.

Answer 1

$(document) .bind('contextmenu', function (e) {
  e.preventdefault();
  if (event.which == 1) {
    $('#menu') .css({
      top: e.pageY + 'px',
      left: e.pageX + 'px'
    }) .show();
  }
  return false;
});

Answer 2

jsFiddle demo
You no need to trigger event, contextMenu can be shown manually.

$( function( windowLoadE ) {
    $( "#selector" ).on( "click", function( clickE ) {
        $( this ).contextMenu( { x: clickE.offsetX, y: clickE.offsetY } );
    } );
    $.contextMenu( {
        selector: "#selector", 
        callback: function( key, options ) {
            var m = "clicked: " + key;
            window.console && console.log( m ) || alert( m ); 
        },
        items: {
            "edit": { name: "Edit", icon: "edit" },
            "cut": { name: "Cut", icon: "cut" },
            "copy": { name: "Copy", icon: "copy" },
            "paste": { name: "Paste", icon: "paste" },
            "delete": { name: "Delete", icon: "delete" },
            "sep1": "---------",
            "quit": { name: "Quit", icon: "quit" }
        }
    } );
} );

Or use trigger option to handle left click.

Answer 3

JavaScript doesn't have the power to open the default browser context menu.

However, you can catch contextmenu event and trigger contextmenu event on simple click:

$('#selector').on('click', function () {
    $(this).triggerHandler('contextmenu');
}).on('contextmenu', function (e) {
    alert('foo');
});

Answer 4

If you are using contextmenu plugin then you can simply use trigger: 'left' for left button click.

$(function(){
    $.contextMenu({
        selector: '.context-menu-one', 
        trigger: 'left',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m); 
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: "quit"}
        }
    });
});

You can find plugin details and documentation from click here link