CODEWITHSUNDEEP
jqueryjquery-mobilepreventdefault
Abhishek Jain
Abhishek Jain

Reputation: 991

Prevent browser pop on taphold event

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');
});

Upvotes: 9

Views: 11178

Answers (6)

mishka
mishka

Reputation: 31

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.

Upvotes: 2

axel wolf
axel wolf

Reputation: 1478

use css:

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

to not show the standard dialog

Upvotes: 11

bafromca
bafromca

Reputation: 1946

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;
    });
});

Upvotes: 1

Roger Large
Roger Large

Reputation: 115

I just took off the link and applied css to make it look like one and used this

$.mobile.changePage( "#main", { transition: "slideup"} );

but i already had it bound to a click event that shows a delete button... no more popup menu

Upvotes: 0

RandomPixels
RandomPixels

Reputation: 34

You were pretty close with it. The correct code is:

$('#ciytList li a ').bind('taphold', function(e) {
    e.preventDefault();
    return false;
} );

Upvotes: 0

Simon E.
Simon E.

Reputation: 58550

What about using the ontouchstart event? I'm pretty sure I've used this to prevent the default iPad interactions from occuring.

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

Upvotes: 0

Related Questions