我在包含列表视图的页面上使用 jquery mobile 和 iscroll/iscrollview，以便滚动列表视图内容。列表视图滚动得很好。 问题是列表视图项目在列表滚动时被意外点击。
如果您有任何解决方案，请告诉我。
我一直在尝试绑定到 onScrollEnd 事件，但未成功，以便我可以将变量 (scroll_stop_time) 设置为滚动停止的时间。
我还有一个 pagebeforechange 事件，它正在检查 scroll_stop_time 变量的时间值，如果时间太近（小于 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 之前
移动初始化
滚动初始化
{注意：我现在滚动，直到我不小心点击了一个列表视图链接}
{这是 onScrollEnd 控制台日志信息在我捕获时显示的地方}
所有页面 - pageshow 事件 - （每次显示任何页面时）
滚动条已停止 28995
{ajax 发布信息，加载其他页面等..}