如果您正在滚动,则在滚动视图中禁止单击Listview

Question

我有一个JQM应用程序,其中有一个简单的搜索页面,将结果显示为列表视图.我已将listview包装在scrollview中.它工作得很好,但是大约一半的时间滚动你选择的任何列表项目.我想抑制这种行为.

我想看到的行为是,如果你滚动并抬起手指,那么就停止滚动.如果您不滚动并点击(单击),那么您正在选择.

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

我已经将一些诊断日志记录添加到jquery.mobile.scrollview并观察触发的事件.我希望我可以在滚动时停止点击,但_handleDragStop总是在PartyItemClick()之前触发.

我也玩过改变delayedClickEnabled的开关,但它似乎没有影响链接点击行为.

我准备为_handleDragStop事件添加一些额外的计时代码,我可以查看是否我刚刚滚动并想问几个问题:

1)在我添加这个hacky计时代码之前,是否有更好的方法来取消该链接点击？

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

Answer 1

看看我对这个问题的回答，听起来你可以在这里使用它，你不必依赖于时间流逝，它是一个组织触摸事件的解决方案，这样你就可以正确地点击和滚动，只需几行就很容易去理解。