リストビューを含むページでjqueryモバイルとiscroll/iscrollviewを使用しているため、リストビューのコンテンツがスクロールされます。リストビューは問題なくスクロールしています。 問題は、リストがスクロールされたときにリストビュー項目が誤ってクリックされることです。
解決策があれば教えてください。
スクロールが停止した時刻に変数 (scroll_stop_time) を設定できるように、onScrollEnd イベントにバインドしようとして失敗しました。
また、scroll_stop_time 変数の時間値をチェックする pagebeforechange イベントもあり、時間が近すぎる (200 ミリ秒未満) 場合は、クリックを停止します。
ただし、onscrollend イベントを発生させることができないため、scroll_stop_time は更新されず、すべてのクリックが通過します。
私のコード:
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="mobile/resources/js/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="mobile/resources/css/jqm-icon-pack-2.0-original.css" />
<link rel="stylesheet" href="mobile/resources/js/jquery.mobile.simpledialog.min.css" />
<link rel="stylesheet" href="mobile/resources/css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="mobile/resources/css/fileuploader.css" type="text/css" media="all" />
<script src="mobile/resources/js/json2.js"></script>
<script src="mobile/resources/js/jquery-1.9.1.min.js"></script>
<script src="mobile/resources/js/jquery.postjson.js"></script>
<script>
var scroll_stop_time = (new Date).getTime(); // initialize the variable
$(document).on("iscroll_init", function() {
console.log('iscroll INIT');
$.mobile.iscrollview.prototype.options.onScrollEnd = function(){
console.log('--iscroll onScrollEnd');
scroll_stop_time=(new Date).getTime(); // update the variable with the current time
};
});
</script>
<script src="mobile/resources/js/iscroll4.2.js"></script>
<script src="mobile/resources/js/jstorage.js"></script>
<script src="mobile/resources/js/jquery.validate-1.7.min.js"></script>
<script type="text/javascript" src="mobile/resources/js/fileuploader.js"></script>
<script type="text/javascript">
console.log('head javascript - before JQM is loaded');
// ==============================================
// ALL PAGES - EVERY TIME THEY ARE DISPLAYED
// ==============================================
// -- all pages - pagebeforechange event --
$(document).on( "pagebeforechange", function( event, data ){
if ( typeof data.toPage === "string" ) {
console.log('all pages - pagebeforechange event - (every time ANY page is about to be displayed)');
console.log(data);
// intercept a page change request
// can alter any aspect of this request, if needed
if(data.toPage.indexOf("manage-inventory") != -1){
// make sure we haven't just recently stopped an iScroll scroller (not really a clicked link)
elapsed_time = ((new Date).getTime()) - scroll_stop_time;
console.log('scroller has been stopped for '+ elapsed_time);
if(elapsed_time < 200){
// user just stopped the scroller and really didnt mean to click on the listview item link
console.log('not really a click');
event.preventDefault();
return false;
}
}
}
});
</script>
<script src="mobile/resources/js/jquery.mobile-1.3.1.min.js"></script>
<script src="mobile/resources/js/jquery.mobile.iscrollview.js"></script>
<script src="mobile/resources/js/jquery.mobile.simpledialog2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_manage-inventory-items_by_type" data-theme="b" data-content-theme="b">
<div data-role="header">
<a href="#panel_nav_manage-inventory-items_by_type" data-icon="direction" data-iconpos="notext" data-inline="true" data-role="button"></a>
<a href="#panel_settings_manage-inventory-items_by_type" data-icon="menu" data-iconpos="notext" data-inline="true" data-role="button" class="ui-btn-right"></a>
<h1>Items by Type</h1>
</div>
<div data-role="content">
<style type="text/css" media="all">
.listview-wrapper, .listview-wrapper div.iscroll-scroller {
width: 100% !important;
}
</style>
<div data-role="fieldcontain" style="margin-bottom:40px;">
<label for="iibt_search">Item Search:</label>
<input type="search" class="item_search" name="iibt_search" id="iibt_search" value="" />
</div>
<h2>Items by Type:</h2>
<style type="text/css">
</style>
<div class="listview-wrapper" data-iscroll>
<ul id="iibt_listview" data-role="listview" data-inset="true" data-filter="true">
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=1&specific_name=Blu-Ray Players&specific_class=t">Blu-Ray Players<span class="ui-li-count">187</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=2&specific_name=CD-ROM Players&specific_class=t">CD-ROM Players<span class="ui-li-count">416</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=3&specific_name=Computers&specific_class=t">Computers<span class="ui-li-count">104</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=4&specific_name=Data Panels&specific_class=t">Data Panels<span class="ui-li-count">253</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=5&specific_name=Data Projectors&specific_class=t">Data Projectors<span class="ui-li-count">160</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=6&specific_name=Digital Cameras&specific_class=t">Digital Cameras<span class="ui-li-count">424</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=7&specific_name=DVD Players&specific_class=t">DVD Players<span class="ui-li-count">347</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=8&specific_name=Easels&specific_class=t">Easels<span class="ui-li-count">372</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=9&specific_name=Flipcharts&specific_class=t">Flipcharts<span class="ui-li-count">441</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=10&specific_name=Laptops&specific_class=t">Laptops<span class="ui-li-count">125</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=11&specific_name=MAC Monitor Cables&specific_class=t">MAC Monitor Cables<span class="ui-li-count">166</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=18&specific_name=Monitors&specific_class=t">Monitors<span class="ui-li-count">315</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=12&specific_name=Overheads&specific_class=t">Overheads<span class="ui-li-count">255</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=13&specific_name=Podiums&specific_class=t">Podiums<span class="ui-li-count">500</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=14&specific_name=Power Supplies&specific_class=t">Power Supplies<span class="ui-li-count">174</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=15&specific_name=Screens&specific_class=t">Screens<span class="ui-li-count">398</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=16&specific_name=Stereos&specific_class=t">Stereos<span class="ui-li-count">469</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=17&specific_name=TVs&specific_class=t">TVs<span class="ui-li-count">101</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=19&specific_name=VGV/MCGA Cables&specific_class=t">VGV/MCGA Cables<span class="ui-li-count">111</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=20&specific_name=Video Cameras&specific_class=t">Video Cameras<span class="ui-li-count">470</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=21&specific_name=Video Projectors&specific_class=t">Video Projectors<span class="ui-li-count">495</span></a>
</li>
<li>
<a href="manage-inventory-items_by_specific.php?specific_id=22&specific_name=Visualizers&specific_class=t">Visualizers<span class="ui-li-count">470</span></a>
</li>
</ul>
</div>
</div>
<div id="fixed_footer" data-theme="a" data-role="footer" data-position="fixed" style="text-align: center;">
<div style="display:inline-block; margin-top:10px; margin-bottom:10px;">manage-inventory-items_by_type</div>
</div>
</div>
</body>
</html>
ブラウザ コンソールに次の出力が表示されます。
head javascript - JQM がロードされる前
mobileinit
スクロール初期化
{注: 間違ってリストビューのリンクをクリックしてしまうまでスクロールします}
{これは、onScrollEnd コンソール ログ情報をキャプチャした場合に表示される場所です}
すべてのページ - pageshow イベント - (任意のページが表示されるたびに)
スクローラーは 28995 の間停止されています
{ajax 投稿情報、他のページが読み込まれているなど..}