несколько касаний: событие touchend запускается только при возникновении touchmove
Я хотел бы добавить некоторые функции мультитач в мое приложение javascript, когда он доступен с устройства ios (и, возможно, android позже).
Я хочу предоставить shiftkey-как функциональность: пользователь может удерживать кнопку на экране одним пальцем, и в то время как эта кнопка нажата, поведение для действия крана на остальной части экрана немного отличается от классического крана.
проблема я бегу в том, что я не получаю любой touchend событие для постукивания пальцем, если touchmove увольняется за первый палец, удерживающий shiftkey.
потому что экран очень чувствителен, touchmove события легко увольняются, и в большинстве случаев все работает нормально.
но когда палец пользователя немного слишком неподвижен, нажатие не обнаружено, пока пользователь не переместит палец немного. Это наводит переменную "задержку" между выстукиванием и действие, которое происходит на экране (задержка может варьироваться и длиться несколько секунд, если пользователь очень спокойный). Я предполагаю, что эта задержка заставит пользователя нажать снова и, таким образом, запустить действие во второй раз, что я не хочу !
вы можете протестировать его здесь с помощью ipad / iphone:http://jsfiddle.net/jdeXH/8/
попробуйте сделать тело оставаться зеленым в течение нескольких секунд, удерживая палец очень неподвижно на cyan div при нажатии на красный див.
можно ли ожидать такого поведения ? Есть известное решение проблемы ? Я ожидал, что событие touchend будет запущено сразу же, когда палец будет удален с экрана.
я протестировал это с iOS 5.1.1 (ipad1 и iphone4s)
edit: найден аналогичный вопрос мультитач touchEvents не срабатывает, как они должны на Safari Mobile
4 ответов
Ну, похоже, что ошибка заморачиваясь некоторые люди больше, чем я, они подали ошибку непосредственно в apple, и через несколько лет она теперь исправлена в iOS6:)
ладно, это головная боль. Да, есть две известные проблемы. Прежде всего, Safari иногда не беспокоит запуск события touchEnd, если где-то нет touchMove, даже если touchMove на самом деле не делает многого.
во-вторых, Chrome Mobile-прекрасный опыт, а также на многих устройствах Android событие touchEnd вообще не срабатывает, независимо от того, что вы делаете. Итак, из моего опыта:
- реализовать событие touchStart, которое регистрирует начало координат и т. д.
- Implmenet событие touchMove, которое делает то же самое, что и touchEnd, но убедитесь, что обратный вызов не срабатывает более одного раза. Используйте логический флаг, определенный в более высокой области или что-то в этом роде.
- реализуйте обычное событие touchEnd, которое должно срабатывать, только если touchMove еще не запустил обратный вызов, используя тот же логический флаг, определенный в более высокой области.
хорошо, я реализовал это решение, и оно, похоже, работает.
//Initialize the tap touch
function ManageTapTouch() {
this.__enabled__ = false;
}
ManageTapTouch.prototype.init = function(){
$("#hold").bind('touchstart', $.proxy(this.__enable__, this));
$('#hold').bind('touchend', $.proxy(this.__disable__, this));
$('#tap').bind('touchstart', $.proxy(this.__changeColorOnHold__, this));
$('#tap').bind('touchend', $.proxy(this.__changeColorOnOut__, this));
};
ManageTapTouch.prototype.__enable__ = function(event) {
this.__enabled__ = true;
};
ManageTapTouch.prototype.__disable__ = function(event) {
this.__enabled__ = false;
$('body').css('background-color', 'blue');
};
ManageTapTouch.prototype.__changeColorOnHold__ = function(event) {
if (this.__enabled__){
$('body').css('background-color', 'black');
}
};
ManageTapTouch.prototype.__changeColorOnOut__ = function(event) {
$('body').css('background-color', 'blue');
};
new ManageTapTouch().init();
вы можете увидеть здесь: http://jsfiddle.net/Tb6t6/15/
также вы можете попробовать другой способ на iPhone с помощью мультитач с:event.originalEvent.touches[0].pageX
и event.originalEvent.touches[0].pageY
где индекс палец на экране и событие-это событие уволен по TouchStart
. С помощью этих тем вы можете реализовать свою собственную версию этого действия или использовать ту, которую я предлагаю здесь.
таким образом, похоже, вы достигли одного из тех сценариев, которые нельзя избежать и будут иметь только багги хаки. Вы создаете функцию пользовательского интерфейса, которая еще не совсем "норма", но, похоже, имеет некоторые перспективы (мне нравится... Мне нравится). Вопрос, который нужно задать себе на этом этапе в технологии:"Как я могу заставить пользователя скользить пальцем, чтобы удерживать shift".
с помощью хорошего дизайнера, я думаю, вы могли бы создать скользящую кнопку переключения, похожую на переключатель... где пользователь должен перетащить и удерживать, чтобы включить переключатель "on". После освобождения переключатель вернется в положение" Выкл". Я упоминаю дизайнера, потому что кнопка должна выглядеть так, как она ведет себя. Возможно, некоторые комментарии могут стать творческими.