Pouvez *vous* obtenir SVG sur un navigateur mobile à accepter la souris/les événements tactiles? Je ne peux pas

Après beaucoup de recherche dans la plaine SVG événements et RaphaelJS événements, j'ai une solution pour chacun. Voici une RaphaelJS solution:

window.onload = function(e) {
    document.getElementById("rsr").addEventListener("mousemove",
        function(event) { 
            logAction(event, this, "m");
        }, false);

    document.getElementById("rsr").addEventListener("touchmove",
        function(event) {
            if(event.preventDefault) event.preventDefault();
            //perhaps event.targetTouches[0]?
            logAction(event.changedTouches[0], this, "t");
        }, false);
};

Le code n'est pas étanche à l'air, mais illustre les principaux points.

Tout d'abord, les événements doivent être enregistrés dans le addEventHandler() de l'appel. À l'aide de la RaphaelJS onmousemove(), etc., les gestionnaires ne fonctionne pas sur la tablette.

Deuxième, les événements tactiles vous avez besoin de creuser dans la liste de touche. Mon application se soucie uniquement de un seul doigt, et donc le [0] événement de la liste est assez. Il y a un certain nombre de listes -- touche, targetTouches, changedTouches -- donc choisir celle qui convient.

Troisième, de déterminer si la fenêtre doit bulle les événements. Je reçois plus de sensibilité à la touche si je l'appelle preventDefault().

J'ai testé cela sur un Google Nexus, iPad 3 et iPad Mini. De bons résultats.

J'ai aussi une solution pour SVG simple. C'est sur ce site:
http://my.opera.com/MacDev_ed/blog/2010/02/01/how-to-get-all-svg-elements-intersected-by-a-given-rectangle

Les différences pour ce que j'utilise et le code Javascript qu'il utilise est que, encore une fois, pour la touche la touche la liste des besoins d'accès. "racine" est l'ID de l'élément svg pour cet exemple. "logTrace" est une période qui reçoit des commentaires.

var root = document.getElementById("root");
var evtt = evt.touches[0];

var rpos = root.createSVGRect();
rpos.x = evtt.clientX;
rpos.y = evtt.clientY;
rpos.width = rpos.height = 1;
var list = root.getIntersectionList(rpos, null);
var maxItemId = list.length <= 0 ? "(no match)" : list[list.length - 1].id;

document.getElementById("logTrace").innerHTML = "screen: (" + evtt.clientX + ", " + evtt.clientY + ") ? uu(" + maxItemId + "): (" + uupos.x.toFixed(0) + "," + uupos.y.toFixed(0) + ")";

J'ai testé cette solution sur un Nexus et un iPad avec succès. Cependant, il se comporte mal sur un iPad Mini -- pourquoi se comportent différemment sur les deux appareils iPad?

J'ai aussi remarqué que la "plaine svg" la solution ne semble pas détecter de façon aussi précise que la RaphaelJS version. Près des bords de mes éléments SVG la détection n'est tout simplement pas très bon avec le svg simple de détection. Je suis toujours de bons résultats pour la RaphaelJS utilisation.

Otoh, que, le RaphaelJS utilisation est sensible à la SVG avoir (fill:none). La plaine SVG n'a pas de soins si (fill:none) est définie dans un élément. Choisissez votre poison.