Определение долгого нажатия (долгое нажатие, удержание нажатия) на Android с помощью jQuery - PullRequest
Новая
       50

Определение долгого нажатия (долгое нажатие, удержание нажатия) на Android с помощью jQuery

8 голосов
/ 17 января 2011

Я смог успешно воспроизвести с событиями touchstart, touchmove и touchend на Android с помощью jQuery и HTML-страницы. Теперь я пытаюсь понять, в чем заключается хитрость, чтобы определить длинное событие касания, когда одно нажатие и удерживание в течение 3 секунд. Я пока не могу понять это. Я хочу этого исключительно в jQuery без Sencha Touch, JQTouch, jQMobile и т. Д.

Мне нравится концепция jQTouch, хотя она не дает мне много, и некоторые из моих кодов ломаются. С Sencha Touch я не фанат перехода от jQuery к Ext.js и некоторого нового способа создания абстракции Javascript, особенно когда jQuery настолько способен. Итак, я хочу выяснить это только с помощью jQuery. Я был в состоянии сделать много вещей jQTouch и Sencha Touch самостоятельно, используя jQuery. И jQMobile все еще слишком бета и еще недостаточно ориентирован на Android.

Ответы [ 5 ]

11 голосов
/ 31 марта 2012

Таймеры не используются, но срабатывают только после того, как пользователь отпустит палец после долгого нажатия. 

var startTime, endTime;
var gbMove = false;

window.addEventListener('touchstart',function(event) {
    startTime = new Date().getTime(); 
    gbMove = false;        
},false);

window.addEventListener('touchmove',function(event) {
  gbMove = true;
},false);

window.addEventListener('touchend',function(event) {
    endTime = new Date().getTime();
    if(!gbMove && (endTime-startTime)/1000 > 2)
        alert('tap hold event');      
},false);
7 голосов
/ 17 января 2011 
var gnStartTime = 0;
var gbMove = false;
var gbStillTouching = false;

function checkTapHold(nID) {
  if ((!gbMove) && (gbStillTouching) && (gnStartTime == nID)) {
    gnStartTime = 0;
    gbMove = false; 
    alert('tap hold event');    
  }
}

window.addEventListener('touchstart',function(event) {
  gbMove = false;
  gbStillTouching = true;
  gnStartTime = Number(new Date());
  setTimeout('checkTapHold(' + gnStartTime + ');',2000);
},false);

window.addEventListener('touchmove',function(event) {
  gbMove = true;
},false);

window.addEventListener('touchend',function(event) {
  gbStillTouching = false;
},false);
0 голосов
/ 03 января 2017

Хотя это не jQuery, но я сделал это так в своем приложении для Android:

  1. прослушиватели зарегистрированных событий: 

    var touchStartTimeStamp = 0;
var touchEndTimeStamp   = 0;

window.addEventListener('touchstart', onTouchStart,false);
window.addEventListener('touchend', onTouchEnd,false);

  2. добавлены функции: 

    var timer;
function onTouchStart(e) {
    touchStartTimeStamp = e.timeStamp;
}

function onTouchEnd(e) {
    touchEndTimeStamp = e.timeStamp;

    console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds
}

  3. проверил разницу во времени и сделал мои вещи

Надеюсь, это поможет.

0 голосов
/ 20 октября 2015

Я сделал что-то вроде этого: 

var touchCounter;

window.addEventListener('touchstart', function () {
  var count = 0;
  touchCounter = setInterval(function () {
    count++;
    if (count == 10) alert('touch lasted 10 seconds');
  }, 1000);
});

window.addEventListener('touchend', function () {
  clearInterval(touchCounter);
  touchCounter = null;
});
0 голосов
/ 26 мая 2012

Почему бы просто не использовать таймер JS? Я сделал что-то вроде: 

i=0;
$drink = document.getElementById('drink');
$drink.addEventListener('touchstart',function(event){
    $('#drink .mainBtnText').text('HOLD'); //mostly for debugging
    t = window.setInterval(function(event){
            i+=.5;
            if (i>=1){
                alert('taphold');
                window.clearInterval(t);
                i=0;
            }
        },500);
});
$drink.addEventListener('touchend',function(event){
    $('#drink .mainBtnText').text('Drink');
    i=0;
    window.clearInterval(t);
});

И до сих пор у меня не было абсолютно никаких проблем с этим ... по общему признанию, я не провел невероятно обширное тестирование устройства, но оно работало на моем рабочем столе (с mousedown / mouseup), а также на HTC Droid Eris ( Android 1.6) и мой Droid RAZR (Android 2.3) ...

...