Question

I am using jQuery mobile popups as context menu fired on right click on desktops and taphold on mobile devices.

My problem: when I right click, the popup appears – it works fine. But when the popup is open and i right click outside of popup, the popup is closed and the standard browser context menu appears instead of new popup.

The popup create a new layer (its class is “.ui-popup-screen” ) under itself to catch events, but something like

$(".ui-popup-screen").on("click", function(event) {
    event.preventDefault();
    $('#myElementWithPopupContextMenu').contextmenu();
    return false;
});

does not work.

Any ideas how to fix it?

Answer 1

i like to write like follow pattern.

// prevent default contextmenu and trigger as 'custom-contextmenu'
$(".ui-popup-screen")
    .bind("contextmenu",function(e) {
        e.preventDefault();

        // create and show menu
        $("#myElementWithPopupContextMenu").trigger( "custom-contextmenu" );
    });

// context menu handler
$("#myElementWithPopupContextMenu").bind( "custom-contextmenu", function(e) {
    // my context menu
}