捕获 iPad 上触摸的持续时间

发布于 2025-01-04 13:15:19 字数 1648 浏览 1 评论 0原文

我试图捕捉触摸开始和结束之间经过的持续时间,但无论我尝试什么,似乎都无法获得一致的行为。

我尝试了几种不同的解决方案,但行为总是零星的。这是我当前正在尝试的示例(如下)。

我为长触摸和短触摸设置了警报,但结果似乎不一致。

我确实看到在“get-the-duration-of-a-touch-in-javascript”之前有人提出了类似的问题,但该解决方案产生了相同的不确定结果。

任何建议将非常感激。

$(document).ready(function() {
    var $IndividualItem = $(".wrapperWithHover li a");
    var touchStartTime;
    var touchStartLocation;
    var touchEndTime;
    var touchEndLocation;
    $IndividualItem.bind('touchstart', startOfTouch);
    $IndividualItem.bind('touchend', endOfTouch);
    $IndividualItem.bind('touchmove', endOfTouch);


 function startOfTouch(e) {
     e.preventDefault();
     var d = new Date();
     touchStartTime = d.getTime();

}
function endOfTouch(e) {
    e.preventDefault();
     var d = new Date();
     touchEndTime= d.getTime();
     doTouchLogic();
}

function doTouchLogic() {
     var duration = touchEndTime - touchStartTime;
     if (duration <= 1500) {
         alert('1');
               }
     if (duration > 1500) {
          alert('2');
     }       
    duration = null;

}






$('.wrapperWithHover li a').each(function() {

   var timeout,
       longtouch;

   $(this).bind('touchstart', function() {
      timeout = setTimeout(function() {
          longtouch = true;
      }, 1000);
   }).bind('touchend', function() {
       if (longtouch) {
          // It was a long touch.
       }
       longtouch = false;
       clearTimeout(timeout);
   });

});

});

这是我用于测试的一小段 html。(必须删除 a href,因为 stackoverflow 阻止我在那里提交问题。)

  • 测试
  • 测试
  • 测试

I am trying to capture the duration elapsed between touch start and end, and cant seem to get a consistent behavior no matter what I try.

I have tried a few different solutions, but the behavior is always sporadic. Here is an example of what I am currently trying(below).

I have alerts in place for the long and short touch, but there just seems to be no consistency in the result.

I do see a similar question has been asked here before 'get-the-duration-of-a-touch-in-javascript' but that solution produces the same uncertain results.

Any advise would be really appreciated.

$(document).ready(function() {
    var $IndividualItem = $(".wrapperWithHover li a");
    var touchStartTime;
    var touchStartLocation;
    var touchEndTime;
    var touchEndLocation;
    $IndividualItem.bind('touchstart', startOfTouch);
    $IndividualItem.bind('touchend', endOfTouch);
    $IndividualItem.bind('touchmove', endOfTouch);


 function startOfTouch(e) {
     e.preventDefault();
     var d = new Date();
     touchStartTime = d.getTime();

}
function endOfTouch(e) {
    e.preventDefault();
     var d = new Date();
     touchEndTime= d.getTime();
     doTouchLogic();
}

function doTouchLogic() {
     var duration = touchEndTime - touchStartTime;
     if (duration <= 1500) {
         alert('1');
               }
     if (duration > 1500) {
          alert('2');
     }       
    duration = null;

}






$('.wrapperWithHover li a').each(function() {

   var timeout,
       longtouch;

   $(this).bind('touchstart', function() {
      timeout = setTimeout(function() {
          longtouch = true;
      }, 1000);
   }).bind('touchend', function() {
       if (longtouch) {
          // It was a long touch.
       }
       longtouch = false;
       clearTimeout(timeout);
   });

});

});

here is a small snip of html I'm using for testing.(had to remove the a hrefs as stackoverflow prevented me from submitting the question with them there.)

  • test
  • test
  • test

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

○闲身 2025-01-11 13:15:19

您不必捕获 touchmove 事件。因为 endOfTouch 方法在 touchmove 事件发生之前就被调用了。

从代码中删除此行并尝试。它应该给你正确的结果。

$IndividualItem.bind('touchmove', endOfTouch);

You don't have to capture the touchmove event. Because of that endOfTouch method is called on touchmove event before even touchend has happened.

Remove this line from your code and try. It should give you proper result.

$IndividualItem.bind('touchmove', endOfTouch);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文