Как обнаружить длинное касание с помощью javascript для Android и iphone?
Как обнаружить длинное касание с помощью javascript для Android и iphone?
собственный javascript или jquery...
Мне нужно что-то вроде:
<input type='button' onLongTouch='myFunc();' />
Ответы
Ответ 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 я не могу запретить мобильному браузеру выходить из диалогового окна вместо запуска моего события.