Using jQuery-mobile popup as context menu

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?

do you have some code for us or a jsfidle for the taphold/ricghtclick-solution? thanx! — headkit
Warning to future readers reading this from google: Using jqm popups for context menu's is a bad idea if you plan on having copy / paste functionality. jqm popups prevent other elements gaining focus, which causes the popular methods of copying to clipboard to fail. — Ryan Leach

cwdoh cwdoh · Accepted Answer · 2013-02-19T15:50:55

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
}

Using jQuery-mobile popup as context menu

1 Answers