iPhone / iPad悬停事件jQuery

Question

I'm trying to use jQuery to attach a listener onto my navigation so that I can show :hover effects on apple touch devices.

I cant seem to get it too work with what I have so far, has anybody used this before?

<script>
    $(document).ready(function() {

        //ipad and iphone fix
        if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
             $("#primary-navigation li a").bind('touchstart', function(){
                console.log("touch started");
             });

             $("#primary-navigation li a").bind('touchend', function(){
                console.log("touch ended");
             });
        }
    });
</script> 

---

I've added an alert just before my selectors which seems to work...

Answer 1

First, if you're on jQuery prior to 1.4.3 try to bind events with .live() instead of .bind() . This will ensure that you will bind to that event even for future, dynamically-injected new elements responding to the selector match.

If you're on jQuery 1.4.3+ but earlier than 1.7 use .delegate() instead of .bind() .

If you're on jQuery 1.7+ then use .on() .

That said, if your test is taking place on iPhone or iPad, use alert() instead of console.log(), as you hardly could check console outputs on those devices.

I can also point out that the markup breakdown you posted is broken, as you have a </cufon element missing the '>' character. It seems this could be a copy-paste issue.

Finally, I can see you're using touch* events; I must assume you are on jQuery Mobile, jQTouch or something?

Because if you're not on one of those, I strongly doubt that you could register listeners for touch events, as basic jQuery doesn't have a representation for them in its own API.

Answer 2

I've added an alert...

$("nav#primary-navigation ul li a").bind('touchstart', function(){
    console.log("touch started");
alert('clicked');       
});

Which works when clicked so i know im targeting everything correctly, is there now a way to disable the link click on ul li a?