捕获 iPad 上触摸的持续时间
我试图捕捉触摸开始和结束之间经过的持续时间,但无论我尝试什么,似乎都无法获得一致的行为。
我尝试了几种不同的解决方案,但行为总是零星的。这是我当前正在尝试的示例(如下)。
我为长触摸和短触摸设置了警报,但结果似乎不一致。
我确实看到在“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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您不必捕获
touchmove
事件。因为endOfTouch
方法在touchmove
事件发生之前就被调用了。从代码中删除此行并尝试。它应该给你正确的结果。
You don't have to capture the
touchmove
event. Because of thatendOfTouch
method is called ontouchmove
event before eventouchend
has happened.Remove this line from your code and try. It should give you proper result.