Есть ли эквивалент позиции e.PageX для события touchstart, как для события click?

104

Я пытаюсь получить позицию X с помощью jQuery события touchstart, используемого с функцией live?

Т.е.

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

Теперь это работает с «щелчком» в качестве события. Как же (без использования альфа- версии jQuery Mobile) получить его с помощью события касания?

Любые идеи?

Спасибо за любую помощь.

javascript jquery events click touch восковой
источник

Я нашел это для тех, кому нужна помощь по этому поводу : - stackoverflow.com/questions/3183872/… Он также работает при сенсорном запуске.

восковой

180

Довольно поздно, но вам нужно получить доступ к исходному событию, а не к обработанному jQuery. Кроме того, поскольку это события с несколькими касаниями, необходимо внести другие изменения:

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

Если вам нужны другие пальцы, вы можете найти их в других индексах списка касаний.

ОБНОВЛЕНИЕ ДЛЯ НОВОГО JQUERY:

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

Мкойстинен
источник

У вас в конце отсутствуют конечные скобки, это должно быть:})

SteveLacy

Вы правы. Удивлен, никто не заметил уже 2 года! =) Спасибо!

mkoistinen

К сожалению, у меня это не сработало, мне пришлось сначала получить x и y touchmove.

andrewb

@andrewb, добавьте e.preventDefault()в touchstartобработчик событий.

matewka 04

Спасибо дружище. Хорошо 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 будет неопределенным для событий касания. Just doout.x = e.pageX || e.originalEvent.touches[0].pageX;

Griffin

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 также был undefined. При осмотре обнаружил свойство класса TouchList (как было предложено другим автором) и смог добраться до pageX / Y следующим образом:

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

Мэтт Чаттерли
источник

4

это отлично работает для всех кодов на основе javascript. винт jquery

Martian2049

2

Спаситель мой! Прекрасно работает даже для touchmove ().

Tibix

7

Если вы не используете jQuery ... вам нужно получить доступ к одному из событий, TouchListчтобы получить Touchобъект, который имеет pageX/Y clientX/Yи т. Д.

Вот ссылки на соответствующие документы:

Я использую e.targetTouches[0].pageXв своем случае.

Скотт Юнгвирт
источник

0

См. Справку разработчика Safari о классе Touch .

В соответствии с этим должны быть доступны pageX / Y - может, стоит проверить орфографию? убедитесь, что это, pageXа неPageX

Том Ту
источник

Есть ли эквивалент позиции e.PageX для события touchstart, как для события click?

Ответы: