2012-04-18 9 views
0

イベントのトリガー時間が300ms遅れているため、「クリック」ではなく「vmouseup」にバインドされたリスト項目があります。jQuery Mobile - vmouseupにバインドされた項目のリストをスクロールする方法

私の問題は、それぞれのリストアイテムをバインドするために 'vmouseup'または 'vmousedown'を使用するときです。リストをスクロールすることはできません。

マイリスト要素はこれについて見て:

$(liElem).bind('vmouseup', function() { 
     scrollToTop(); 
     showDetails(); 
}); 
  1. はどのようにして、リストの要素にvmouseupイベントをトリガすることなく、リストをスクロールすることができますか?
  2. 私はSOFlowのどこかでvmouseupが必ず起動されるわけではないので、代わりにvmousedownを使用する必要がありますか?私は#1への答えは、iOSの4.2.1(iPodタッチではstopPropagation()preventDefault()

    UPDATED ANSWER

    のわずかな可能性unbind()/die()に関係しています知っていると思う

)は、閾値アプローチではバグがあるようです。スクロールアップ(上から下にスワイプ)するとすべてうまく動作しますが、スクロールダウン(下から上にスワイプ)するとpageYはfalse値を返し、イベントを発生させることがよくあります。たとえば、しきい値が30ピクセルに設定されていて、電話の最下部から最上部にスワイプすると、イベントが発生する可能性があります。 jQueryMobile 1.1.0 RC1とjQuery 1.7.1を使用しています。

答えて

2
var did_user_swipe = false; 
$(liElem).bind('vmousedown', function() { 
    did_user_swipe = false; 
}).bind('vmouseup', function() { 
    if (!did_user_swipe) { 
     scrollToTop(); 
     showDetails(); 
    } 
}).bind('vmousemove', function() { 
    did_user_swipe = true; 
}); 

これは、デフォルトでfalseというフラグを設定します。ユーザが指をスワイプ・モーションでドラッグすると、フラグはtrueに設定されます。フラグがtrueに設定されると、vmouseupイベントハンドラは実行されません。ここで

はデモです:http://jsfiddle.net/RB6mp/

更新

あなたがスワイプ/ vmousemoveイベントにバインドする必要性を減少させるだけでなく行動をクリックする閾値を設定することができます。

var coords = [0, 0], 
    threshold = 100;//in pixels 
$(liElem).bind('vmousedown', function (event) { 

    //when the mouse is clicked, set the coordinates of that event 
    coords = [event.pageX, event.pageY]; 
}).bind('vmouseup', function (e) { 

    //when the mouse is released, calculate the distance from the start of the click to the end 
    var distance = Math.sqrt(Math.pow(coords[0] - e.pageX, 2) + Math.pow(coords[1] - e.pageY, 2)); 

    //if the distance of the "swipe" is longer than the `threshold` set 
    if (distance > threshold) { 
     alert('Swipe (' + Math.floor(distance) + 'px)'); 
    } else { 
     alert('Click (' + Math.floor(distance) + 'px)'); 
    } 
});​ 

ここにデモがあります:http://jsfiddle.net/RB6mp/4/

+0

うわー..それは速かった..ありがとう!あなたが角を回って、ジャスパーに潜入していることを知っていた。そしてそのコードはiPhoneとアンドロイドでうまくいきますか? – micadelli

+0

私はデモを作成していますが、フラグをリセットするための 'vmousedown'イベントを含めるように答えを更新したことに気付きました。 – Jasper

+0

@micadelliここにデモがあります:http://jsfiddle.net/RB6mp/1/ – Jasper

関連する問題