Question

我对这个小插件非常满意：https://github.com/benmajor/jQuery-Touch-Events。但是没有太多的文档。我想限制用户滑动，并认为使用返回的'swipeend'时间值应该很容易。我无法弄清楚如何获得价值！

作者的示例代码效果很好（下面），但我必须尝试过100种不同的排列＆amp;仍然无法获得滑动的时间戳。我需要这个，因为没有必要限制正常的点击次数和滚动。

// works
$('element').on('tapend', function (e, touch) { console.log( 'tapend', touch.time ); })

// doesn't work
$('element').on('swipeend', function (e, touch) { console.log( 'swipeend', touch.time ); }) // undefined

有人可以帮帮我吗？

Answer 1

事实证明这很容易（在我读完大脑阅读文档之后。）

$( '#one' )
    .on( 'swiperight', function(){
        $( this ).addClass( 'moveright' );
    })
    .on( 'swipeleft', function(){
        $( this ).addClass( 'moveleft' );
    })
    .on( 'swipeup', function( ev, touch ){
        $( this ).removeClass( 'moveleft moveright' );
    })
    .swipeend(function( ev, touch ){  // <=== returns touch event data
        console.log( ev, ev.timeStamp ); 
    });

#one {
  width: 150px;
  height: 150px;
  background: blue;
  transition: all .4s ease-in-out;
  cursor: pointer;
 }
 #one.moveright {
   transform: translateX( 150% );
   background: red;
 }
 #one.moveleft {
   transform: translate( 50%, 50% );
   background: yellow;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.5/jquery.mobile-events.js"></script>
<div id="one"></div>
<p>Swipe right, left and up</p>

如果您正在构建复杂事件，那么返回的Rails.configuration.to_prepare数量是不可思议的。为了进行适当的时间比较，我从Date.now()中减去了返回的数字。显然这在Firefox或IE8中无法正常工作，但我不太关心发现变通办法。

当然，还有其他方法可以实现简单的事件节流。在大多数情况下，可以在将potential data和.off()添加回来之前删除处理程序。

使用jQuery Touch事件捕获滑动事件（Ben Major）

1 个答案: