32 votes

l'événement touchend ne fonctionne pas sur Android

J'ai juste commencé à faire quelques notions de développement web mobile sur android et une écriture d'un script de test pour enquêter sur les événements tactiles. J'ai exécutez le code suivant dans l'émulateur android, et le touchend événement n'est jamais déclenché. Quelqu'un peut me dire pourquoi ?

J'ai essayé en trois versions de l'émulateur (1.6, 2.1 et 2.2) et tous les trois se comportent de la même manière.

Merci d'avance pour toute aide que vous pouvez me donner.

Cheers, Colm

EDIT - j'ai aussi essayé en utilisant le XUI cadre et ont le même problème donc je suppose que j'ai une incompréhension fondamentale de la façon dont ça fonctionne ......

Test De La Carte

    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="language" content="english" />

    <meta name="viewport" content="minimum-scale=1.0,
                                   width=device-width,
                                   height=device-height,
                                   user-scalable=no">
    <script type="text/javascript">
        window.onload = function(){
            document.body.appendChild(
                    document.createTextNode("w: " + screen.width + " x " + "h : " +screen.height)
            );
           attachTouchEvents();
        }
        function attachTouchEvents() {
            console = document.getElementById("console");
            var map = document.getElementById("map");
            map.addEventListener ('touchstart', function (event) {
                event.preventDefault();
                var touch = event.touches[0];
                document.getElementById("touchCoord").innerHTML = "S : " + touch.pageX + " " + touch.pageY;
                document.getElementById("touchEvent").innerHTML = "Touch Start";
            }, false);

            map.addEventListener ('touchmove', function (event) {
                event.preventDefault();
                var touch = event.touches[0];
                document.getElementById("touchCoord").innerHTML = "M : " + touch.pageX + " " + touch.pageY;
                document.getElementById("touchEvent").innerHTML = "Touch Move";
            }, false);

            map.addEventListener ('touchend', function (event) {
                var touch = event.touches[0];
                document.getElementById("touchCoord").innerHTML = "E : " + touch.pageX + " " + touch.pageY;
                document.getElementById("touchEvent").innerHTML = "Touch End";
                event.preventDefault();
            }, false);
            console.innerHTML = "event attached";
        }
    </script>
    <style type="text/css">
        html, body {
            height:100%;
            width:100%;
            margin: 0;
            background-color:red;
        }
        #map {
            height: 300px;
            width: 300px;
            background-color:yellow;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div id="touchCoord">Touch Coords</div>
    <div id="touchEvent">Touch Evnt</div>
    <div id="console">Console</div>

</body>

31voto

SystemParadox Points 1864

Pour ceux qui cherchent à comprendre pourquoi touchend événements sont manquants sur Android v3 et v4 (peut-être aussi v2.3), il y a un long suspens bug qui vient à peine d'fixe dans la v4.1 (apparemment):

http://code.google.com/p/android/issues/detail?id=4549

http://code.google.com/p/android/issues/detail?id=19827

Pour contourner ce bogue, vous devez appeler preventDefault() sur les évènements touchstart ou de la première touchmove événement. Bien sûr, cela empêche le natif de défilement, de sorte que vous aurez besoin de re-mettre en œuvre vous-même.

21voto

Volomike Points 7083

Voici comment vous devez l'utiliser correctement. Vous capturez les x, y de départ lorsque le doigt va à l'écran. Lorsque le doigt se déplace, l'événement touchmove met à jour une fin x, y. Une fois terminé, le contact se déclenche - mais oui, il n'a pas de tableau de contacts, et donc une erreur javascript. C'est pourquoi nous ne l'utilisons que pour capturer qu'il s'agit d'une tâche de fin (les doigts ont quitté l'écran) et ensuite y réagir. (Dans ce cas, j'envoie une alerte informative.)

 var gnStartX = 0;
var gnStartY = 0;
var gnEndX = 0;
var gnEndY = 0;

window.addEventListener('touchstart',function(event) {
  gnStartX = event.touches[0].pageX;
  gnStartY = event.touches[0].pageY;
},false);

window.addEventListener('touchmove',function(event) {
  gnEndX = event.touches[0].pageX;
  gnEndY = event.touches[0].pageY;
},false);

window.addEventListener('touchend',function(event) {
  alert('START (' + gnStartX + ', ' + gnStartY + ')   END (' + gnEndX + ', ' + gnEndY + ')');
},false);
 

8voto

Protos Points 147

C'est le développement web, je suis donc la construction d'une page web qui peuvent utiliser les événements tactiles.

J'ai compris quel était le problème.

Lorsque l' touchend événement est déclenché l' event.touches[] tableau est vide, donc une erreur Javascript s'est levée. L'événement a été déclenché, mais il n'a pas d'imprimer quoi que ce soit, parce que j'ai été tenter d'accéder à des données undefined. L'émulateur navigateur ne semble pas avoir n'importe quel Javascript outils de débogage que j'ai trouvé, et n'a même pas me dire quand une erreur Javascript s'est produite, de sorte qu'il m'a fallu un certain temps pour comprendre.

2voto

dplehati Points 21

La TouchList est toujours vide lorsque l'événement tactile est déclenché car vous avez supprimé tous les doigts de l'écran :).

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

2voto

kenshou.html Points 71
map.addEventListener ('touchend', function (event) {
    var touch = event.changeTouches[0];
    ...
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X