Как обнаружить долгое нажатие на сенсорный экран с помощью JavaScript для Android и iPhone?

Question

Как обнаружить долгое нажатие сенсорного экрана с помощью JavaScript для Android и iPhone?нативный javascript или jquery ...

Я хочу что-то похожее на:

<input type='button' onLongTouch='myFunc();' />

Answer 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 };

Answer 2

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

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

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>

Answer 3

Я сделал это в своем приложении для 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. проверил разницу во времени и сделал мои вещи

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

Answer 4

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

Mouseup / down вроде бы нормально работает на android - но не на всех устройствах т.е. (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)
});

Answer 5

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

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);

Answer 6

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

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

Answer 7

Длинное событие касания, которое работает во всех браузерах

(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);

нижняя функция загорается при длительном нажатии на сенсорное устройство

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