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

are you sure it's not a rightclick menu? what browser? try listening to `contextmenu` event and `.preventDefault();return false;` on it — naugtur, May 04 '11 at 11:26
if I understand correctly, @naugtur suggests the solution as described here: https://stackoverflow.com/questions/30775237/disable-taphold-default-event-cross-device Worked in all my cases with touch devices — gaugau, Nov 16 '18 at 18:30

score 11 · Answer 1 · answered Apr 03 '12 at 12:23

11

use css:

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

to not show the standard dialog

answered Apr 03 '12 at 12:23

axel wolf

1,446
3
18
29

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. – Vijay Kumbhar May 20 '12 at 19:17
Works great on iOS is there an android equivalent does anyone know? – Jon Wells Mar 27 '13 at 12:02

score 2 · Answer 2 · edited Nov 04 '12 at 09:54

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.

score 1 · Answer 3 · answered Mar 16 '12 at 16:02

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

score 0 · Answer 4 · answered Jul 10 '11 at 09:44

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

score 0 · Answer 5 · answered Aug 15 '11 at 00:38

0

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

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

answered Aug 15 '11 at 00:38

RandomPixels

34
3

score 0 · Answer 6 · answered Jan 17 '12 at 04:43

0

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

answered Jan 17 '12 at 04:43

Roger Large

105
12

Prevent browser pop on taphold event

6 Answers6

Linked