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

Answer 1

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