Как обнаружить длинное касание с помощью javascript для Android и iphone?

Ответ 1

Проблема с использованием Touch End для обнаружения длительного касания - это не сработает, если вы хотите, чтобы событие срабатывало через определенный промежуток времени. Лучше использовать таймер при запуске прикосновения и очистить таймер события на сенсорном конце. Можно использовать следующий шаблон:

var onlongtouch; 
var timer;
var touchduration = 500; //length of time we want the user to touch before we do something

touchstart() {
    timer = setTimeout(onlongtouch, touchduration); 
}

touchend() {

    //stops short touches from firing the event
    if (timer)
        clearTimeout(timer); // clearTimeout, not cleartimeout..
}

onlongtouch = function() { //do something };

Ответ 2

Прямо здесь: http://m14i.wordpress.com/2009/10/25/javascript-touch-and-gesture-events-iphone-and-android/

Используйте touchstart и touchend для обнаружения длительного касания с учетом времени

Ответ 3

Мы можем рассчитать разницу во времени при начале касания и при касании. Если вычисленная разность во времени превышает длительность касания, мы используем имя-имя функции.

var touchduration = 300; 
var timerInterval;

function timer(interval) {

    interval--;

    if (interval >= 0) {
        timerInterval = setTimeout(function() {
                            timer(interval);
                        });
    } else {
        taphold();
    }

}

function touchstart() {
    timer(touchduration);
}

function touchend() {
    clearTimeout(timerInterval);
}

function taphold(){
    alert("taphold");
}


document.getElementById("xyz").addEventListener('touchstart',touchstart);
document.getElementById("xyz").addEventListener('touchend',touchend);

Ответ 4

Вот расширенная версия ответа Джошуа, так как его код работает хорошо, пока пользователь не выполняет мультитач (вы можете нажать экран двумя пальцами, и функция будет срабатывать два раза, 4 пальца - 4 раза). После некоторых дополнительных тестовых сценариев я даже вызвал возможность очень быстро коснуться и получить функцию, выполняемую после каждого нажатия.

Я добавил переменную с именем "lockTimer", которая должна блокировать любые дополнительные сенсорные кнопки перед запуском пользователя "touchhend".

var onlongtouch; 
var timer, lockTimer;
var touchduration = 800; //length of time we want the user to touch before we do something

function touchstart(e) {
	e.preventDefault();
	if(lockTimer){
		return;
	}
    timer = setTimeout(onlongtouch, touchduration); 
	lockTimer = true;
}

function touchend() {
    //stops short touches from firing the event
    if (timer){
        clearTimeout(timer); // clearTimeout, not cleartimeout..
		lockTimer = false;
	}
}

onlongtouch = function() { 
	document.getElementById('ping').innerText+='ping\n'; 
};

document.addEventListener("DOMContentLoaded", function(event) { 
  window.addEventListener("touchstart", touchstart, false);
  window.addEventListener("touchend", touchend, false);
});

<div id="ping"></div>

Ответ 5

Для кроссплатформенных разработчиков:

Mouseup/down, похоже, хорошо работает на андроиде, но не на всех устройствах, т.е. (samsung tab4). Не работает вообще на iOS.

Дальнейшее исследование кажется, что это связано с тем, что элемент имеет выбор, а собственное увеличение прерывает слушателя.

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

Он использует отзывчивый класс изображения, поэтому показывает большую версию изображения. Этот фрагмент кода был полностью протестирован (iPad/Tab4/TabA/Galaxy4):

var pressTimer;  
$(".thumbnail").on('touchend', function (e) {
   clearTimeout(pressTimer);
}).on('touchstart', function (e) {
   var target = $(e.currentTarget);
   var imagePath = target.find('img').attr('src');
   var title = target.find('.myCaption:visible').first().text();
   $('#dds-modal-title').text(title);
   $('#dds-modal-img').attr('src', imagePath);
   // Set timeout
   pressTimer = window.setTimeout(function () {
      $('#dds-modal').modal('show');
   }, 500)
});

Ответ 6

"Длинное касательное давление" называется "нажатием", и оно реализовано в Hammer.js http://hammerjs.github.io/ Попробуйте свои демонстрации.

Ответ 7

Я сделал это в своем приложении для Android:

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

  var touchStartTimeStamp = 0;
  var touchEndTimeStamp   = 0;
  
  window.addEventListener('touchstart', onTouchStart,false);
  window.addEventListener('touchend', onTouchEnd,false);
  

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

  var timer;
  function onTouchStart(e) {
      touchStartTimeStamp = e.timeStamp;
  }
  
  function onTouchEnd(e) {
      touchEndTimeStamp = e.timeStamp;
  
      console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds
  }
  

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

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

Ответ 8

Событие с длинным нажатием, работающее во всех браузерах

(function (a) {
        function n(b) { a.each("touchstart touchmove touchend touchcancel".split(/ /), function (d, e) { b.addEventListener(e, function () { a(b).trigger(e) }, false) }); return a(b) } function j(b) { function d() { a(e).data(h, true); b.type = f; jQuery.event.handle.apply(e, o) } if (!a(this).data(g)) { var e = this, o = arguments; a(this).data(h, false).data(g, setTimeout(d, a(this).data(i) || a.longclick.duration)) } } function k() { a(this).data(g, clearTimeout(a(this).data(g)) || null) } function l(b) {
            if (a(this).data(h)) return b.stopImmediatePropagation() ||
            false
        } var p = a.fn.click; a.fn.click = function (b, d) { if (!d) return p.apply(this, arguments); return a(this).data(i, b || null).bind(f, d) }; a.fn.longclick = function () { var b = [].splice.call(arguments, 0), d = b.pop(); b = b.pop(); var e = a(this).data(i, b || null); return d ? e.click(b, d) : e.trigger(f) }; a.longclick = { duration: 500 }; a.event.special.longclick = {
            setup: function () {
                /iphone|ipad|ipod/i.test(navigator.userAgent) ? n(this).bind(q, j).bind([r, s, t].join(" "), k).bind(m, l).css({ WebkitUserSelect: "none" }) : a(this).bind(u, j).bind([v,
                w, x, y].join(" "), k).bind(m, l)
            }, teardown: function () { a(this).unbind(c) }
        }; var f = "longclick", c = "." + f, u = "mousedown" + c, m = "click" + c, v = "mousemove" + c, w = "mouseup" + c, x = "mouseout" + c, y = "contextmenu" + c, q = "touchstart" + c, r = "touchend" + c, s = "touchmove" + c, t = "touchcancel" + c, i = "duration" + c, g = "timer" + c, h = "fired" + c
    })(jQuery);

Привязать событие longclick с интервалом времени

 $('element').longclick(250, longClickHandler);

ниже функция fire on Long Tap на сенсорном устройстве

function longClickHandler() {
    alter('Long tap Fired');
}

Ответ 9

Я пробовал, это трудно сделать. Я еще не хотел принимать большую мобильную платформу для своих приложений, но если с ней все в порядке, Sencha Touch должен поддерживать это и другие события касания на устройствах webkit.

В моем тестировании с использованием touchstart я не могу запретить мобильному браузеру выходить из диалогового окна вместо запуска моего события.