【问题标题】:how to make a phonegap selectable scrollable div list如何制作一个phonegap可选择的可滚动div列表
【发布时间】:2013-03-31 16:55:38
【问题描述】:

正如标题所说。我想在 div 中创建一个 div 元素列表。我希望能够向上和向下滚动列表,当列表不再滚动时,我希望能够单击列出的元素做某事。我不知道该怎么做。

每当用户触摸 div 时都会执行 touchmove 事件,即使 div 正在滚动。然后我不知道如何让程序知道 div 不再滚动,所以下一次触摸元素将触发不可滚动事件.....

编辑:

到目前为止,我所拥有的是……但是,这是一个快速的“修复”,它没有按预期工作。例如,如果您快速上下滚动,那么 div 会认为您按下了其中一个元素..

exerciseWrapper 是滚动 div 内的元素。每个元素都包裹在 exerciseWrapper 周围。

$('.exerciseWrapper').on('touchstart',function(){

        touchstart=true;
                setTimeout(function(){

                    touchstart=false;           
                    }, 100); 

    });

    $('.exerciseWrapper').on('touchend',function(){

        if(touchstart)
        {
                $('.exerciseWrapper').not(this).css('border-color','black');
                $(this).css('border-color','orange');
        }

    });

【问题讨论】:

    标签: events cordova touch selected scrollable


    【解决方案1】:

    好的,所以我终于想通了。。我无法将注意力集中在解决方案上的原因是因为我无法获得其他事件,然后 eventstart 和 event end 开始工作...在撰写本文时,我仍然无法让 eventcancel 和 eventleave 等其他事件正常工作。但是 eventmove 有效,我使用此事件解决了问题。当您移动手指时,eventmove 会不断更新其链接的元素。然后,如果我滚动我的 div (使用 touchmove 事件),我有一个 touchmove 变量始终为真。当我停止移动时,我可以再次单击所选元素并使用正常的 eventstart 事件。这是我的工作代码:

    var touchmove=false;
    function AddExercisesEvents()
    {
        $('#exerciseMenu').on('touchmove',function(){
    
                touchstart=true;    
                            $('h1').text("move");
    
            });
    
        $('.exerciseWrapper').on('touchend mouseup',function(event){
                        event.stopPropagation();
                        event.preventDefault();
                        //  $('.exerciseWrapper').off();
    
                    if(event.handled !== true)
                    {
                touchstart=false;
    
                //ENTERING editExercise Menu..!
                if(!touchstart)
                    {
            //insert magic here 
                                    alert($(this).attr('id'));
    
    
                    }
    
    
                    }
                        return false;
                                     });
    }
    

    【讨论】:

      猜你喜欢
      • 2021-09-19
      • 1970-01-01
      • 2014-03-26
      • 1970-01-01
      • 1970-01-01
      • 2019-05-27
      • 2021-05-18
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多