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