2011-07-14 11 views
6

Mam aplikację JQM z prostą stroną wyszukiwania, pokazującą wyniki jako widok listy. Zapakowałem mój listview w scrollview. Działa całkiem nieźle, ale mniej więcej w połowie czasu, gdy skończysz przewijanie, wybrana jest lista, na której się znajdujesz. Chciałbym powstrzymać to zachowanie.Pomiń kliknięcie w widoku listy w przewijanym widoku, jeśli przewijałeś stronę

Zachowanie, które chciałbym zobaczyć, to to, że jeśli przewijasz i podnosisz palec, przestań przewijać. jeśli nie przewijasz i dotykasz (kliknij), to wybierasz.

<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> 

Dodałem diagnostykę logowania do jquery.mobile.scrollview i obserwowałem zdarzenia, które się uruchamiają. Miałem nadzieję, że mogę zatrzymać kliknięcie podczas przewijania, ale _handleDragStop zawsze strzela przed PartyItemClick().

Grałem też z włączaniem i wyłączaniem opcji delayedClickEnabled, ale wydaje się, że nie wpływa ona na zachowanie kliknięcia linku.

Jestem prawie gotowi, aby dodać jakiś dodatkowy kod czasowy przypadku _handleDragStop że mogę sprawdzić, jakbym właśnie przewijanie i chciałem zadać kilka pytań:

1) przed idę dodać ten hacky kod czasu, czy istnieje lepszy sposób, aby anulować kliknięcie łącza?

2) jeśli chcę dodać własny kod obsługi zdarzeń do _handleDragStop, w jaki sposób mogę to zrobić. Próbowałem niektórych wywołań funkcji bind(), ale muszę mieć błędne nazwy zdarzeń. to co próbowałem:

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

aktualizacji: skończyło się na szczepienie trochę telemetrii na razie scollview _handleDragMove stosując następujący kod:

// 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); 
    }; 
}()); 

wtedy kiedy przetwarza zdarzenia click, sprawdzić aby sprawdzić, czy minęło wystarczająco dużo czasu.

this.SearchResultItemClick = function(){ 

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

to nie jest najlepsze rozwiązanie, ale wygląda na to, że działa. Dla kompletności, tutaj są moje funkcje użytkowe:

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; 
} 
+0

Skończyłem na dodaniu kodu czasowego do scrollview, aby uchwycić ostatni czas przeciągnięcia: –

Odpowiedz

1

Wyjazd odpowiedź dałem this question, brzmi jak można go używać tutaj, nie będzie musiał polegać na upływ czasu, jest to rozwiązanie, które organizuje dotyk wydarzenia, aby można było dotykać i przewijać poprawnie, wystarczy kilka linii, które są łatwe do zrozumienia.

Powiązane problemy