Чи існує еквівалент позиції e.PageX для події "touchstart", як і для події натискання?


104

Я намагаюся отримати позицію X за допомогою jQuery події сенсорного запуску, використовуваної за допомогою функції "live"?

Тобто

$('#box').live('touchstart', function(e) { var xPos = e.PageX; } );

Тепер це працює як "клік" як подія. Як на землі (не використовуючи альфа- jQuery Mobile) я можу це отримати за допомогою дотику?

Якісь ідеї?

Дякуємо за будь-яку допомогу.


Я знайшов це для тих, хто потребує допомоги з цього питання: - stackoverflow.com/questions/3183872/… Це також працює на сенсорному старті.
восковий

Відповіді:


180

Ніби не пізно, але вам потрібно отримати доступ до оригінальної події, а не в jQuery, що масажується. Крім того, оскільки це події з кількома дотиками, необхідно внести інші зміни:

$('#box').live('touchstart', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

Якщо ви хочете інші пальці, їх можна знайти в інших показниках списку дотиків.

ОНОВЛЕННЯ ДЛЯ НОВОГО ОПИТУ:

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

У вас є відсутні дужки з кінцевими дужками в кінці, це має бути:})
SteveLacy

Право ти є. Здивований ніхто не помітив за 2 роки! =) Дякую!
mkoistinen

На жаль, не працювало для мене, я в кінцевому підсумку повинен отримати х і у на першому touchmove.
andrewb

@andrewb, додайте e.preventDefault()в touchstartобробник подій.
matewka

Дякую друже. Добре e.touches[0].pageX;працював для мене
Джаянт Варшні

43

Я використовую цю просту функцію для проекту, заснованого на JQuery

    var pointerEventToXY = function(e){
      var out = {x:0, y:0};
      if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        out.x = touch.pageX;
        out.y = touch.pageY;
      } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
        out.x = e.pageX;
        out.y = e.pageY;
      }
      return out;
    };

приклад:

$('a').on('mousedown touchstart', function(e){
  console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40}
})

сподіваюся, що це буде корисно для вас;)


13
Не потрібно перевіряти тип події, оскільки e.pageX не буде визначений для подій на дотик. Просто зробітьout.x = e.pageX || e.originalEvent.touches[0].pageX;
Гриффін

1
Перед поверненням я додаю цю частину, щоб отримати відсоткове розташування на основі батьківського елемента, якщо це допомагає комусь ... var offsetParent = e.target.offsetParent; var parentLeft = e.target.offsetParent.offsetLeft; out.percentX = (out.x - offsetParent.offsetLeft) / offsetParent.offsetWidth; out.percentY = (out.y - offsetParent.offsetTop) / offsetParent.offsetHeight; повернути;
sradforth

if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){-> if (e.type.startsWith("touch"))?
gil9red

@Griffin - Я думаю, що проблема з вашою пропозицією полягає в тому, що на робочому столі, коли миша знаходиться в лівій частині документа, перша гілка вашого виводу отримає 0, що інтерпретується як помилкове, а потім помилка браузера, оскільки торкається невизначено на другій гілці. Погодьтеся?
MSC

13

Тут я спробував деякі інші відповіді, але originalEvent також був невизначений. Після огляду знайшов властивість TouchList, що класифікується (як це запропонував інший плакат), і вдалося потрапити на сторінкуX / Y таким чином:

var x = e.changedTouches[0].pageX;

4
це добре працює для всіх кодів на основі JavaScript. гвинтовий jquery
Martian2049

2
Мій рятівник! Відмінно працює навіть для touchmove ().
Тібікс

7

Якщо ви не використовуєте jQuery ... вам потрібно отримати доступ до одного з подій, TouchListщоб отримати Touchоб'єкт, який містить pageX/Y clientX/Yі т.д.

Ось посилання на відповідні документи:

Я використовую e.targetTouches[0].pageXу своєму випадку.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.