jQuery mobile tap event triggered for twice
jquery, jquery-mobile
Solution
I forget where I saw this, but the issue is that jQuery Mobile is binding to both touch and mouse events in order to simulate "tap," and in some circumstances Android will fire both.
The trick that has worked for me is to call `preventDefault` on the event in your event handler. That will keep the duplicate event from firing.
As far as why this is the case only sometimes, I know that mobile browsers will try to only fire the mouse version of the event if someone isn't listening to the touch version. There may be an issue with detection or jQuery's delegation that is confusing that heuristic.
Problem
I tested with jquery mobile 'tap' event and found it fired two times, everytime it is triggered. Code as below for a html page: ``` <!DOCTYPE html> <html> <head> <title>Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script> <style> #box{ background-color:red; width:200px; height:200px; } </style> </head> <body> <div id="box"> tapped me </div> <script type="text/javascript"> $(document).ready(function() { $('#box').bind('tap',function(event) { alert('why'); }); }); </script> </body> </html> ``` More irony is when I test this over jsfiddle, it only fired the event for one time. Here's the link. http://jsfiddle.net/mochatony/tzQ6D/6/ After further testing I found out the bug has gone away with placing the javascript at header section. ``` <!DOCTYPE html> <html> <head> <title>Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"> </script> <style type="text/css"> #box{ background-color:red; width:200px; height:200px; } </style> <script type="text/javascript"> $(document).ready(function() { $('#box').bind('tap', function(event) { alert('halo'); }); }); </script> </head> <body> <div id="box"> tapped me </div> </body> </html> ``` I couldn't explained why the placement at the body and header section make this different.