Wrong jQuery event firing from mobile devices

I'm having issues from mobile devices with the following div, link and jQuery:

<div id="div1" style="width:300px;height:100px;">
    <a href="#" id="link1">Link</a>
</div>

<script type="text/javascript">
$('#link1').click(function() {
    alert('Clicked link');
});  

$('#div1').mouseenter(function(){
    alert('Entered div');
});  
</script>

From a PC if you hover div1, it alerts "Entered div". When you click link1, it alerts "Clicked link". Perfect.

However, from a mobile device hover does not work. Which is okay, but when a use开发者_StackOverflow社区r clicks link1, it alerts "Entered div" first. If they click again it alerts "Clicked link".

How can I get it to alert "Clicked link" the first time a user clicks link1 from a mobile device without sacrificing how it works from a desktop?

---

Welcome to mobile devices :)

You need to feature-detect if you are running on a touch-enabled device and either not bind your mouseenter events, or bind to the touch events directly and prevent them from getting converted into clicks and mouseenters.

---

can you give a try as below,

if you say return false , it can stop the propagation , but i am not 100% sure with mobile devices..just give a try

$('#link1').click(function() {
    alert('Clicked link');
    return false;
});

---

I had the same problem. I've just implemented the following...

var is_ios = navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/);

if(!is_ios){ 

  // bind my hover behaviours here

}

add an else to that if you want to do something specifically for iphone/ipad/ipod. In my case I didn't need to.