Prevent browser pop on taphold event

Question

In a jquery-mobile based web app, how do i prevent the default browser menu from showing on "tap hold" .. instead i want to show a custom dialog page ..

mentioned below is my code as of now ..

$(".task_row").bind('taphold',function(event, ui){
    event.preventDefault();
    $("#slide_down_menu").trigger('click');
});

Solution 1

use css:

a {
    -webkit-touch-callout: none !important; 
}

to not show the standard dialog

Solution 2

The trouble is that the 'taphold' event that you are binding to is a custom event that is triggered by jQuery Mobile, so it is not the same event that triggers the browser's default behavior.

If the default menu you are trying to avoid is the one that allows you to "Open" or "Copy" the url, then one solution is to not use an <a> tag. If you use a span or a div, you can bind an ontap function to it that will change the browser's location, and your taphold event will not be interrupted with the default behavior.

Solution 3

I found out you have to disable right-clicking.

$(function(){

    document.oncontextmenu = function() {return false;};

    $(document).mousedown(function(e){

        if ( e.button == 2 )
        { 
            alert('Right mouse button!'); 
            return false; 
        }

        return true;
    });
});

Comments

[naugtur]

are you sure it's not a rightclick menu? what browser? try listening to contextmenu event and .preventDefault();return false; on it

[Vijay Kumbhar]

This worked for me. My problem was same. I want to avoid user to tap & hold on some of the links. That is achieved by this css.

[Jon Wells]

Works great on iOS is there an android equivalent does anyone know?