Existe uma posição equivalente à posição e.PageX para o evento 'touchstart' e para o evento de clique?

104

Estou tentando obter a posição X com jQuery de um evento touchstart, usado com a função ao vivo?

Ie

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

Agora, isso funciona com 'click' como o evento. Como diabos (sem usar o alfa jQuery Mobile) faço para obtê-lo com um evento de toque?

Alguma ideia?

Obrigado por qualquer ajuda.

javascript jquery events click touch ceroso
fonte
Eu encontrei isso para aqueles que precisam de ajuda: - stackoverflow.com/questions/3183872/… Também funciona no touchstart.
cerâmico de

Respostas:

180

Um pouco tarde, mas você precisa acessar o evento original, não o jQuery massageado. Além disso, como se trata de eventos multitoque, outras alterações precisam ser feitas:

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

Se você quiser outros dedos, poderá encontrá-los em outros índices da lista de toques.

ATUALIZAÇÃO PARA O JQUERY MAIS NOVO:

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});
Mkoistinen
fonte
Você tem parênteses finais ausentes no final, deveria ser:})
SteveLacy
Você está certo. Surpreso que ninguém percebeu por 2 anos! =) Obrigado!
mkoistinen de
Infelizmente não funcionou para mim, acabei tendo que obter xey no primeiro touchmove.
andrewb
@andrewb, adicione e.preventDefault()no touchstartmanipulador de eventos.
matewka
Obrigado parceiro. Bem e.touches[0].pageX;funcionou para mim
Jayant Varshney
43

Eu uso esta função simples para projetos baseados em 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;
    };

exemplo:

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

espero que seja útil para você;)

Nedudi
fonte
13
Não há necessidade de verificar o tipo de evento porque e.pageX será indefinido para eventos de toque. Basta fazerout.x = e.pageX || e.originalEvent.touches[0].pageX;
Griffin
1
Antes de retornar, adiciono esta parte para obter a localização da porcentagem com base no elemento pai, caso isso ajude alguém ... 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; voltar para fora;
sradforth
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){-> if (e.type.startsWith("touch"))?
Gil9red
@Griffin - Acho que o problema com sua sugestão é que no desktop, quando o mouse está na borda esquerda do documento, o primeiro branch de sua declaração vai render 0, que é interpretado como falso, e depois os erros do navegador porque toca é indefinido no segundo ramo. Aceita?
MSC de
13

Tentei algumas das outras respostas aqui, mas originalEvent também foi indefinido. Após a inspeção, encontrou uma propriedade classificada TouchList (como sugerido por outro autor) e conseguiu chegar à página X / Y desta forma:

var x = e.changedTouches[0].pageX;
matt.chatterley
fonte
4
isso funciona bem para todos os códigos baseados em javascript. parafuso jquery
Martian2049
2
Meu Salvador! Funciona perfeitamente mesmo para touchmove ().
Tibix