suppress click in a Listview in a scrollview if you were scrolling

Question

I have a JQM app with a simple search page showing the results as a listview. I've wrapped my listview in a scrollview. It works pretty well but about half the time when you are done scrolling whatever listitem you are on is selected. I'd like to suppress that behavior.

The behavior I'd like to see is that if you are scrolling and you lift your finger, then just stop scrolling. if you are not scrolling and you tap (click) then you are selecting.

<div id="vehicleScroller" data-scroll="y" style="height:444px">
    <p>
    <ul id="vehicleSearchResults" data-role="listview">
     <li>
        <a href="#PartyDetailsPage" data-id='${Number}' 
          onclick='return $.vehicle.PartyItemClick();'> 
          ${Name}&nbsp;
        </a>
      </li>
      [... more li's...]
    </ul>

  </div>

I've added some diagnostic logging to jquery.mobile.scrollview and watch the events that fire. I was hoping that I could stop the click while scrolling but _handleDragStop always fires before PartyItemClick().

I've also played around with changing delayedClickEnabled on and off but it does not seem to effect the link click behavior.

I'm about ready to add some additional timing code to the _handleDragStop event that I could check to see if i've just been scrolling and wanted to ask a few questions:

1) before i go add this hacky timing code, is there a better way to cancel that link click?

2) if I want to add my own event handler code to _handleDragStop, how do I do that. I've tried some bind() calls, but I must be getting the event names wrong. this is what i've tried:

$('#vehicleScroller').bind('_handleDragStop',function(){
    console.log('_handleDragStop-vehicleScroller');
});

update: I ended up grafting some telemetry onto the scollview _handleDragMove event using the following code:

// adding some custom code to the scrollview to track the 
$.mobile.scrollview.prototype._handleDragMove = (function() {
    var origDragMove = $.mobile.scrollview.prototype._handleDragMove;
    return function __handleDragMove() {
        $.util.SetLastMoveTime(); // this is the only new line of code
        origDragMove.apply(this, arguments);
    };
}());

then when i process the click event, I check to see if enough time has passed.

this.SearchResultItemClick = function(){

    if($.util.WasScrolling()) {
        event.stopPropagation();
        return false;
    }

this is not the greatest solution, but it seems to work. For completeness, here are my utility functions:

LastMoveTime = 0;

this.SetLastMoveTime = function(){
    LastMoveTime = getCurrentTime();
}

function getCurrentTime() { return (new Date()).getTime(); }

this.WasScrolling = function(){
    var then = LastMoveTime;
    var now = getCurrentTime(); 
    var dif = now-then;
    //console.log("then:"+then+", now:"+now+", dif:"+dif);
    if(dif < 333){
        return true;
    }
    return false;
}

Answer 1

Check out the answer I gave to this question, sounds like you could use it here, you won't have to depend on time lapses, it's a solution that organizes touch events so you can tap and scroll properly, just a few lines pretty easy to understand.