Suppress click in list in scroll if you scroll

Question

I have a JQM application with a simple search page showing results in a list. I collapsed my scroll list. It works very well, but about half the time when you scroll through any list you are on is selected. I would like to suppress this behavior.

The behavior I would like to see is that if you scroll and you lift your finger, then just stop scrolling. if you do not scroll and you click (click), then you select.

<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 have added some diagnostic entries to jquery.mobile.scrollview and watch for events that fire. I was hoping I could stop the click while scrolling, but _handleDragStop always fires before PartyItemClick ().

I also played with changing delayedClickEnabled on. and off, but it does not seem to affect the behavior of the link.

I am ready to add an extra time code to the _handleDragStop event, which I could check to check, I just scrolled around and wanted to ask a few questions:

1) before I enable this hacker time code, is there a better way to cancel this link?

2) if I want to add my own event handler code to _handleDragStop how to do this. I tried some bind () calls, but I should mistakenly accept event names. this is what i tried:

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

update: I ended up broadcasting some telemetry on 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 handle 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 best 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

Look at the answer I gave to this question , it looks like you can use it here, you don’t have to depend on time delays, it is a solution that organizes touch events so that you can click and scroll correctly, just a few lines that are easy to understand.