Question

I have a jquery / phonegap app, and everything is good and fast and working except for one small item. the first initial vclick, tap whatever is picked up twice. after you have done the first one, everything is okay. I have tried all sorts like e.preventDefault(); in many places and tried pr-loading pages but still no matter what i always get that initial double click.

here is sample ecmascript

$('nav[id="homeList"] div[data-cust="homelink"]').live("vclick",function(e){
    e.preventDefault();

    var over = $(this).attr('data-over');

    if(over !== undefined){ $(this).addClass(over); }
    var pageTo = $(this).attr('data-pagename');

    Log( 'Page to: ' + pageTo );

    if(pageTo !== undefined){
        $.mobile.changePage("#" + pageTo);
        if(over !== undefined){ $(this).removeClass(over); }
    }

    //e.preventDefault();
});

here is sample HTML:

<div class="ui-listitem">
        <div class="block sprite2 binbox relat" data-pagename="inbox" data-over="binboxover" data-cust="homelink"></div>
     </div>

the nav with id of homeList is just my html5 tag that all the ui-listitems sit inside
really puzzled, but am sure someone knows how to maybe cancel out this strange behaviour .

thanks

p.s i have looked at other double click / double event fireing on here but they relate to something that happens over and over, i must stress that this is only for the first time

I have found some sort of fix, but if you click the same location it cancels your click
i have tried setting some kind of global variable but that would mean every tap would have to be registered with the global, so the global holds the last click location and therfor cancelling my initial buttons click location. have also thought that if there is a global click location then there is no need to check but that wont cancel the first it will just prevent the rest, anyway here is the code that cancels, but prevents:

            var lastClick = $( this ).attr( 'data-lastclick' ),
        curClickPoint = e.clientX+'x'+e.clientY
        if( lastClick === curClickPoint) return false;
        $( this ).attr( 'data-lastclick', curClickPoint );

okay came up with a final solution:

set a global

var hasDoneFirstClick = false;

in the same function as above i have used this code:

if ( !hasDoneFirstClick ) { 
        hasDoneFirstClick = true;
        return false;
    }

it is only the initial click that is doubled so i just ignore the first ever click / tap !

Answer 1

I’m not sure this answers you question but jQueryMobile in Beta 2 opted to use click instead of vclick. You can read the release notes on this:

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

Quote:

Backtrack: We’ve switched back from vclick to click for links

In Beta 1, we decided to use our custom vclick event for handling Ajax
links to improve responsiveness and to hide the URL bar on the iPhone
and Android phones. Even though we did quite a bit of testing before
landing this for Beta 1, we began to hear feedback that this change
was causing some significant issues out in the wild including:

• Multiple click events causing navigation and form element issue –
  In certain situations, when tapping an element, tap/click events
  seem to fire twice on links and is due to edge cases where the
  target of the touch event and mouse event don’t match due to how
  the browsers calculate tolerances for these events. This is most
  pronounced on Android 2.1, but affected most WebKit-based browsers
  to varying degrees when a tap events occured near the edge of an
  element.

• Click handlers in custom scripts didn’t “work” anymore – if a
  script bound only to click events on the document, the global
  vclick feature could interfere because the touch events may
  supercede click events so it events wouldn’t appear to trigger.
  Based on a lot of detailed testing and analysis, we’ve decided to
  roll back to using standard click events on links instead of using
  the custom vclick event because it’s the only reliable way to
  support all our target browsers. There are two important things to
  note in this change: