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

   

        

                      

              相关标签:
       
      

Answer 1

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

Answer 2

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

Answer 3

<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 */
 }

Answer 4

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.

Answer 5

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

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