Як я можу розпізнати сенсорні події за допомогою jQuery в Safari для iPad? Це можливо?

Чи можна розпізнати події дотику в браузері Safari iPad за допомогою jQuery?

Я використовував події mouseOver та mouseOut у веб-програмі. Чи є подібні події для браузера Safari iPad, оскільки немає таких подій, як mouseOut та mouseMove?

Core jQuery не має нічого особливого для сенсорних подій, але ви можете легко створити свій власний, використовуючи наступні події

• сенсорний запуск
• сенсорний рух
• дотик
• сенсорний

Наприклад, touchmove

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

Це працює в більшості браузерів на базі WebKit (включаючи Android).

Ось добра документація .

Якщо ви використовуєте jQuery 1.7+, це навіть простіше, ніж усі ці інші відповіді.

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });

Найпростіший підхід - використовувати багатоконтактну бібліотеку 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 способом, як я.

Використання сенсорного запуску або сенсорного керування не є хорошим рішенням, оскільки, якщо ви прокручуєте сторінку, пристрій визначає її як сенсорне або торкання. Отже, найкращий спосіб одночасно виявити подію натискання та натискання - це просто виявити сенсорні події, які не рухаються по екрану (прокрутка). Для цього просто додайте цей код у свою заявку:

$(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. Він виявляє кран і легко розрізняє прокрутку дотику та дотику.

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

$('#selector')
.on('touchstart mousedown', function(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(touch){
    // Do some stuff
  }
  else {
    // Do some other stuff
  }
});

jQuery Core не має нічого особливого, але ви можете читати на сторінці jQuery Mobile Events про різні сенсорні події, які також працюють на інших пристроях iOS.

Вони є:

• натисніть
• тапхолд
• проведіть пальцем
• стрімкий рух
• швидкий

Зауважте також, що під час подій прокрутки (на основі дотику до мобільних пристроїв) пристрої iOS заморожують маніпуляцію DOM під час прокрутки.

Я був трохи турбувався про використання тільки TouchMove для мого проекту, так як здається , тільки вогонь , коли ваші дотики переміщається з одного місця в інше (а не на початковому контакті). Тож я поєднав це з сенсорним стартом , і це, здається, працює дуже добре для початкового дотику та будь-яких рухів.

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

Щойно я тестував плагін GitHub jQuery Touch Events від Benmajor для версій jQuery 1.4 та 1.7+. Він легкий і прекрасно працює з обома, onі bindпри цьому надає підтримку вичерпному набору сенсорних подій.