Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

alpha4 - click/tap fires AFTER page transition when clicking generated "back" button #1416

Closed
gfortytwo opened this Issue · 4 comments

2 participants

@gfortytwo

New in alpha4. Only reproduced (so far) on my Android 2.2 Droid X. Main page has anchor-wrapped image at top of content area. Tap link to second (internal page). Generated "back" button shows in header bar. Tap the generated "back" button, and the click/tap even fires after the page transition. This cause the image link on the first page to be followed and the browser navigates to the target of that link - very bad!

Example code at JSBin and below. Here's the sequence of events, along with the JS console output:

User loads page, displays div/page "pgFoo".
04-08 15:33:32.770 28684 28684 I browser : Console: #pgFoo saw pagebeforeshow event.
04-08 15:33:32.802 28684 28684 I browser : Console: #pgFoo saw pageshow event.
User clicks link to "#pgBar", page transitions.
04-08 15:33:43.309 28684 28684 I browser : Console: #pgFoo saw pagebeforehide event.
04-08 15:33:43.309 28684 28684 I browser : Console: #pgBar saw pagebeforeshow event.
04-08 15:33:43.848 28684 28684 I browser : Console: #pgFoo saw pagehide event.
04-08 15:33:43.848 28684 28684 I browser : Console: #pgBar saw pageshow event.
User clicks generated "back" button in header to return to first page ("pgFoo").
04-08 15:33:55.466 28684 28684 I browser : Console: #pgBar saw pagebeforehide event.
04-08 15:33:55.466 28684 28684 I browser : Console: #pgFoo saw pagebeforeshow event.
04-08 15:33:55.950 28684 28684 I browser : Console: #jqLink saw click event.
04-08 15:33:55.950 28684 28684 I browser : Console: #jqLink saw tap event.
04-08 15:33:56.145 28684 28684 I browser : Console: #pgBar saw pagehide event.
04-08 15:33:56.145 28684 28684 I browser : Console: #pgFoo saw pageshow event.

Notice that the "click/tap" event registers in the middle of the transition on a link on the target page. If I use CSS to shift the "jqLink" on the first page down so that it does not occupy the same area of the viewport as the "back" button on "pgBar" then the link is not followed (though I presume the "tap" still occurs at those coordinates).

Here is the example source:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>FOO page</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head> 
<body> 

<div id="pgFoo" data-role="page">
  <div id="hdr_div" data-role="content" data-theme="a">
    <a id="jqLink" href="http://www.jquery.com" rel="extern" style="display: block; border: 2px solid red; height: 57px; width: 186px;">
      <img src="http://cdn.jquery.net/mobile/wp-content/themes/jquery-mobile/images/jquery-mobile-logo.png" />
    </a>
  </div>

  <div id="menu_div" data-role="content">   
    <ul data-role="listview" data-inset="true">
      <li><a href="#pgBar">Go to BAR page</a></li>
      <li><a href="http://www.google.com" data-ajax="false">Go to Google</a></li>
    </ul>
  </div>
</div><!-- /page "pgFoo" -->

<div id="pgBar" data-role="page">
    <div data-role="header" data-backbtn="true">
        <h1>BAR page</h1>
    </div>

    <div data-role="content">
        <h2>Lorem Ipsum</h2>
        <p>Random paragraph text.</p>
    </div>
</div><!-- /page "pgBar" -->

<script language="javascript">
$('#jqLink').bind('click tap', function(myEvent) {
    console.info("#jqLink saw " + myEvent.type + " event.");
});
$('#pgFoo').bind('pagebeforeshow pageshow pagebeforehide pagehide animationComplete', function(myEvent) {
    console.info("#pgFoo saw " + myEvent.type + " event.");
});
$('#pgBar').bind('pagebeforeshow pageshow pagebeforehide pagehide animationComplete', function(myEvent) {
    console.info("#pgBar saw " + myEvent.type + " event.");
});
</script>

</body>
</html>
@jblas

@inetdevboy

We released Alpha 4.1 yesterday which has a fix for this. Please give it a try and re-open this if you can still reproduce the problem.

Thanks for reporting.

  • Kin
@jblas jblas closed this
@gfortytwo

Awesome, @jblas. I will try it. Is there an existing incident? I looked for one and never saw one that seemed directly applicable. I hate submitting duplicates... :-(

@gfortytwo

Yay! Alpha 4.1 seems to have fixed my problem.

@jblas

@inetdevboy

Yeah there were like 5 dups but we closed them so their not in the open bucket.

Anyways, keep the reports coming. Thanks!

  • Kin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.