JQMアプリケーションを使用して、結果をリストビューとして表示する簡単な検索ページがあります。私はscrollviewで私のリストビューをラップしました。それはかなりうまくいきますが、あなたのリストアイテムが選択されていてもスクロールが完了している時間の約半分が選択されています。私はその行動を抑制したいと思います。あなたがスクロールしていた場合、スクロールビューのListviewでクリックを抑制する
私が見たい動作は、スクロールして指を持ち上げた後、スクロールを止めることです。スクロールせずにタップ(クリック)すると、選択しています。
<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}
</a>
</li>
[... more li's...]
</ul>
</div>
jquery.mobile.scrollviewに診断ログを追加し、発生するイベントを監視しました。スクロール中にクリックを止めることができたと思っていましたが、_handleDragStopは常にPartyItemClick()の前に発生します。
また、delayedClickEnabledのオンとオフを変更して遊んだことがありますが、リンクのクリック動作には影響しないようです。
は、私はちょうどスクロールをしてきたかどうかを確認することができ_handleDragStopイベントにいくつかの追加のタイミングコードを追加しようと準備ができていますし、いくつかの質問お願いしたかった:
1)私が追加行く前にこのハックなタイミングコードは、リンクをクリックしてキャンセルするより良い方法はありますか?
2)_handleDragStopに独自のイベントハンドラコードを追加したい場合、どうすればいいですか?私はいくつかのbind()呼び出しを試しましたが、私はイベント名を間違っていなければなりません。
$('#vehicleScroller').bind('_handleDragStop',function(){
console.log('_handleDragStop-vehicleScroller');
});
アップデートを:私は、次のコードを使用してscollview _handleDragMoveイベントにいくつかのテレメトリを移植することになった:
// 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);
};
}());
それから私は、クリックイベントを処理するとき、私はチェックこれは私が試したものです十分な時間が経過したかどうかを確認します。
this.SearchResultItemClick = function(){
if($.util.WasScrolling()) {
event.stopPropagation();
return false;
}
これは最大の解決策ではありませんが、動作するようです。完全を期すために、ここで私のユーティリティ関数は、次のとおりです。
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;
}
私は最後のdragemove時間をキャプチャするためにスクロールビューにいくつかのタイミングコードを追加しました: –