Depois de clicar em uma imagem em algum ponto, quero obter as coordenadas xey desse ponto em relação ao canto superior esquerdo da imagem.
Depois de googling e stackoverflowing um pouco, eu encontrei esta solução com jquery.
<html>
<script type="text/javascript" src="jquery.js"></script>
<body>
<!-- WEBSITE CONTENT -->
<img src="/images/image.jpg" id="test">
<script>
$(document).ready(function() {
$("#test").click(function(e) {
var offset = $("#test").offset();
var x=e.pageX - offset.left;
var y=e.pageY - offset.top;
alert(x+" "+y);
});
});
</script>
</body>
</html>
Bem, este código parece funcionar muito bem em dispositivos não móveis, mas tem problemas em alguns dispositivos móveis, no sentido de que nãoretornar as coordenadas corretas (pelo menos pageY). Por outro lado, até mesmo outras soluções (baseadas no uso de screenX / Y) parecem ter problemas em dispositivos móveis.
Então, eu estou querendo saber:
1) alguém conhece uma solução robusta trabalhando para mobile? Ou,
2) alguém conhece uma solução alternativa para, pelo menos, detectar se o dispositivo móvel não interpreta corretamente o código acima?
Respostas:
0 para resposta № 1Talvez a página seja dimensionada. Quando no windows, ela retorna (2,2) talvez no celular ela retorne (1,1).