How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

Question

I am building an app for iPhone and iPad using PhoneGap and jQM

<div class="ui-block-a">
   <a id="btnLink" href="#pageID" data-role="button"></a>
</div>

and it functions fine, but when I run it on the device (didn't try the simulator) and press a long press, I get the default iPhone menu for a link in a normal browser to open or copy the link.

how can I disable this default feature in my app?

I tried these with no success:

$("a").click(function(event) {
  event.preventDefault(); // long press menu still apear
});


$("a").bind('click',function(event) {
console.log(['preventingclick',event.type]);
event.preventDefault(); // long press menu still apear
});

if I bind on 'taphold' I still see the menu on a long press, but after I click cancel I see the console log: ["preventing long press","taphold"]

$("a").bind('taphold', function(event) {
console.log(['preventing long press',event.type]);
event.preventDefault(); // long press menu still apear
});

if I use delegate on 'taphold' event like this:

$("a").delegate('taphold', function(event) {
console.log(['preventing long press',event.type]);
event.preventDefault();
});

will fix the problem, but I can't attach any events anymore, so non of my buttons will work after that.

$('#btnLink').bind("click", function() {
$.mobile.changePage('mypage', 'slide'); // won't fire any more because of the delegate before
});

I know that delegate will apply on all elements now and in the future, but I think I am getting close to the answer, but not yet.

Thanks in advance

Anchor long press menu on iPhone

score 12 · Accepted Answer · answered May 23 '12 at 16:59

12

ok got it to work,

I had to combine both code fixes, CSS and JavaScript

so in my CSS I did this:

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

in my JavaScript did this:

function onBodyLoad() {
  $("a").bind('taphold', function(event) {
  event.preventDefault();
 });
}

and now all the links are disabled, but if I attach an event to any of them it will work with no problem

THanks all

answered May 23 '12 at 16:59

EMMNS

280
1
4
17

1

does `taphold` require jQuery mobile? – Ian Campbell Jun 15 '14 at 05:09

codemonkey · Answer 2 · 2012-05-23T15:36:16.283

11

Have a look at the events fired by JQM here http://jquerymobile.com/demos/1.1.0/docs/api/events.html. You want to handle the "taphold" event.

EDIT Soon after posting this I ended up seeing the same problem in my app! I found that adding this style, similar to what @chrisben suggested fixes it:

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

I don't have any form elements on my app so I don't know about those but links and buttons all work perfectly fine with this style added.

edited May 23 '12 at 15:36

answered May 23 '12 at 08:17

codemonkey

5,257
2
18
16

Tried preventing default on tabhold using bind, did not work if I use delegate, all my click events and buttons will stop working, even the ones that I attached events to them after, wont work, I guess I am getting close, but not the final answer yet, thanks – EMMNS May 23 '12 at 15:13

score 7 · Answer 3 · answered May 23 '12 at 07:52

7

When you do $('a').click( .. ) you're only processing the 'click' event. Here it's a different event and actually a system event for iOS that you cannot handle in javascript.

So you'll have to disable this feature completely from your webapp if you don't want it.

Try the following:

<script>
document.documentElement.style.webkitTouchCallout = 'none';
</script>

Or in your CSS:

a[data-role=button] {
    -webkit-user-select: none!important;
}

answered May 23 '12 at 07:52

chrisben

955
8
16

thanks for your response, actually I just tried this and it did not work, still getting the menu in my app on a long press... – EMMNS May 23 '12 at 15:01
The javascript does work. Replace documentElement with the element you need to disable the styling for. – Hamer Jul 17 '12 at 16:30

score 3 · Answer 4 · answered Jul 17 '12 at 16:33

3

Simplest way to get this to work on iPhone is to disable the webkit touch styles:

document.getElementById('your element id').style.webkitTouchCallout = 'none';

answered Jul 17 '12 at 16:33

Hamer

1,354
1
21
34

score 3 · Answer 5 · answered Oct 28 '14 at 14:27

<style type="text/css">
 *:not(input):not(textarea) {
 -webkit-user-select: none; /* disable selection/Copy of UIWebView */
 -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}       
</style>

**If you want Disable only anchor button tag use this.**
 a {-webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
 }

How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

5 Answers5

Linked