Page transition problem with "ghost" mouse events (Android)

Page transition problem with "ghost" mouse events (Android)

Hi. I am getting problems on Android devices where mouse events from one page are being executed on the new page after a transition. I have included two simple test pages that use list views to navigate between the two pages. The hover style (.ui-btn-hover-c) which is a grey gradient is applied to the list item on the page it transitions to. Also note that I have switched off transitions as I have had many problems with them on Android. The API event documentation does state that problems like this can occur, but what can I do about it? I have tried almost everything. Also note that when you switch between the two pages sometimes it appears to work then you click on a different row and it highlights both of them.

I get this problem with my older Android 2.2 phone. It seems okay with my newer HTC phone running Jellybean. A Samsung Galxaxy running Android 4.02 is also getting this problem. The iOS devices I have tried seem fine.

Any help much appreciated. Here is the for my test pages
Page 1
  2. <!DOCTYPE html>
  3. <html>
  4.    <head> 
  5.       <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  7. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  8.     <script>
  9. $(document).bind("mobileinit", function(){
  10.     $.mobile.defaultPageTransition = 'none';
  11.     $.mobile.defaultDialogTransition = 'none';
  12.     $.mobile.useFastClick = true;
  13. });    
  14. </script>      
  15. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  16. </head>
  17.     <body>
  18.     <div data-role="page">  
  19. <div data-role="content" align="center">
  20. <div class="content-primary">
  21. <ul data-role="listview" data-inset="true">
  22. <li><a href="Test2.jsp">Page 1 Line one</a></li>
  23. <li><a href="Test2.jsp">Page 1 Line Two</a></li>
  24. <li><a href="Test2.jsp">Page 1 Line Three</a></li>
  25. <li><a href="Test2.jsp">Page 1 Line Four</a></li>
  26. </ul>
  27. </div>

  29. </div>
  30. </div>
  31.     </body>
  32. </html>
Page 2 is the same but transitions page to the first page
  2. <!DOCTYPE html>
  3. <html>
  4.    <head> 
  5.       <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  7. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  8.     <script>
  9. $(document).bind("mobileinit", function(){
  10.     $.mobile.defaultPageTransition = 'none';
  11.     $.mobile.defaultDialogTransition = 'none';
  12.     $.mobile.useFastClick = true;
  13. });    
  14. </script>      
  15. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  16. </head>
  17.     <body>
  18.     <div data-role="page">  
  19. <div data-role="content" align="center">
  20. <div class="content-primary">
  21. <ul data-role="listview" data-inset="true">
  22. <li><a href="Test1.jsp">Page 2 Line one</a></li>
  23. <li><a href="Test1.jsp">Page 2 Line Two</a></li>
  24. <li><a href="Test1.jsp">Page 2 Line Three</a></li>
  25. <li><a href="Test1.jsp">Page 2 Line Four</a></li>
  26. </ul>
  27. </div>
  28. </div>
  29. </div>
  30.     </body>
  31. </html>