Как распознать сенсорные события с помощью jQuery в Safari для iPad? Является ли это возможным?

192

Можно ли распознать сенсорные события в браузере Safari на iPad с помощью jQuery?

Я использовал события mouseOver и mouseOut в веб-приложении. Существуют ли подобные события для браузера Safari на iPad, поскольку нет таких событий, как mouseOut и mouseMove?

Абхишек Б.
источник

Ответы:

240

Core jQuery не имеет ничего особенного для сенсорных событий, но вы можете легко создать свой собственный, используя следующие события

  • touchstart
  • TouchMove
  • touchend
  • touchcancel

Например, touchmove

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

Это работает в большинстве браузеров на базе WebKit (включая Android).

Вот некоторые хорошая документация .

Дэвид Пин
источник
2
Большое спасибо Дэвид, я думаю, что это сработает, но что такое e.touches [0]? Можете ли вы описать аргумент "е" в деталях?
Абхишек Б.
7
e - объект события, который автоматически передается обработчику. Для браузера Safari (и Android тоже) теперь он содержит массив всех касаний, которые пользователь сделал на экране. Каждое прикосновение имеет свои свойства (например, координаты x, y)
Дэвид Пин
1
теперь, как вы узнаете, какой элемент вызвать событие -__-
Мухаммед Умер
Обратите внимание, что правильный ответ - тот, который сделал Тимоти Перес, этот не обновляется.
EPurpl3
149

Если вы используете jQuery 1.7+, это даже проще, чем все остальные ответы.

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
Тимоти Перес
источник
1
Да, Тимоти, я не использовал версию 1.7+ на момент запуска проекта. Теперь я использую jquery 1.7+. Спасибо за хорошее предложение и ответ .. Большое спасибо. :)
Абхишек Б.
7
Это хорошо работает. Мне нужно было щелкнуть мышью и запустить сенсорный запуск, чтобы сделать то же самое, и я привык к необъектному синтаксису, как$('#whatever').on('touchstart click', function(){ /* do something... */ });
goodeye
1
когда я иду $('#whatever').on({ 'touchstart' : function(ev){}});, evкажется, не имеет какую - либо информацию о прикосновениях (прикосновения, targetTouches или changedTouches)
Octopus
8
@ Осьминог: Вы найдете информацию о прикосновениях ниже ev.originalEvent.
Питер Блумфилд
1
@edonbajrami Да, конечно. проверьте документы и найдите «делегированные события». $ ("# элемент для отслеживания новых элементов"). on ("eventX", "#element", function (event) {/ * what * /});
honk31
24

Самый простой подход заключается в использовании мультитач-библиотеки JavaScript, такой как Hammer.js . Затем вы можете написать код:

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // And double click
        // Zoom-in
    })
    .bind('dragstart', function(e) { // And mousedown
        // Get ready to drag
    })
    .bind('drag', function(e) { // And mousemove when mousedown
        // Pan the image
    })
    .bind('dragend', function(e) { // And mouseup
        // Finish the drag
    });

И вы можете продолжать идти. Он поддерживает касание, двойное касание, пролистывание, удержание, преобразование (т.е. сжатие) и перетаскивание. События касания также запускаются, когда происходят эквивалентные действия мыши, поэтому вам не нужно писать два набора обработчиков событий. Да, и вам нужен плагин jQuery, если вы хотите иметь возможность писать в jQueryish, как я.

Дэвид Джонстон
источник
29
«простейшее» решение никогда не предполагает усложнения задачи путем добавления библиотек
Octopus
13
@Octopus Самое простое решение - использовать hammer.js, который избавляет от головной боли между браузерами. Используйте расширение jQuery, чтобы быть в вашей знакомой зоне. Не кажется мне слишком сложным.
trusktr
1
Предполагаемое «простейшее» решение - это то, что люди чаще всего испортят… что бы вы ни делали, не забудьте убедиться, что ваше решение работает на устройствах, поддерживающих как сенсорное, так и мыши, таких как Microsoft Surface
Simon_Weaver
1
@ Осьминог: «Когда все, что у тебя есть, это молоток [sic] ... все выглядит как гвоздь» :)
Gone Coding
Это МОЛОЧНОЕ ВРЕМЯ! Спасибо, что поделились этой библиотекой, ее было легко установить в моем приложении и запустить! Потребовалась секунда для настройки, потому что обработчик событий отличается, но простой console.log (событие) говорит вам, что вам нужно. СПАСИБО!
Энди
24

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

$(document).on('touchstart', function() {
    detectTap = true; // Detects all touch events
});
$(document).on('touchmove', function() {
    detectTap = false; // Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") detectTap = true; // Detects click events
       if (detectTap){
          // Here you can write the function or codes you want to execute on tap

       }
 });

Я протестировал его, и он отлично работает для меня на iPad и iPhone. Он обнаруживает касание и может легко различать касание и прокрутку касанием.

Иман Седиги
источник
2
Это решение кажется самым прямым из всех, что я нашел, и, похоже, отлично работает на iOS.
Джошуа Лоуренс Остил
Сначала я использовал jquery mobile, но потом это мешало другим функциям. Я использую это сейчас и работает отлично. Пока никаких проблем.
Анураг Приядарши
18

Вы можете использовать .on () для захвата нескольких событий, а затем проверить их на прикосновение, например:

$('#selector')
.on('touchstart mousedown', function(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(touch){
    // Do some stuff
  }
  else {
    // Do some other stuff
  }
});
featherbelly
источник
кроме того, что .bindне рекомендуется. Вы должны использовать.on
Jcuenod
15

В jQuery Core нет ничего особенного, но вы можете прочитать на странице jQuery Mobile Events о различных сенсорных событиях, которые также работают на устройствах, отличных от iOS.

Они есть:

  • нажмите
  • taphold
  • красть
  • проведите пальцем влево
  • swiperight

Также обратите внимание, что во время событий прокрутки (на основе касания на мобильных устройствах) устройства iOS замораживают манипулирование DOM при прокрутке.

Karol
источник
Спасибо, что уделили мне время на мой вопрос. Я смотрю на события Jquery Mobile .. Спасибо.
Абхишек Б.
Эти события на самом деле не отражают реального сенсорного взаимодействия.
trusktr
Является ли jQuery Core настоящим именем?
Питер Мортенсен
6

Я был немного обеспокоен использованием только touchmove для моего проекта, так как он, кажется, срабатывает только тогда, когда ваше касание перемещается из одного места в другое (а не при первоначальном касании). Так что я объединил его с touchstart , и это, кажется, работает очень хорошо для начального прикосновения и любых движений.

<script>

function doTouch(e) {
    e.preventDefault();
    var touch = e.touches[0];

    document.getElementById("xtext").innerHTML = touch.pageX;
    document.getElementById("ytext").innerHTML = touch.pageY;   
}

document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);

</script>

X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>
hanamj
источник
Я также добавил это, чтобы определить, сколько времени прошло с момента последнего события ..document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
hanamj
3

Я только что протестировал плагин BenQor's GitHub jQuery Touch Events для версий jQuery 1.4 и 1.7+. Это легкий и отлично работает с обоими , onи bindобеспечивая при этом поддержку исчерпывающего набора сенсорных событий.

Рохан
источник