Können *Sie* Holen Sie sich SVG auf mobilen browser akzeptieren Maus/touch-events? Ich kann nicht

Nachdem eine Menge Forschung in Reine SVG-Veranstaltungen und RaphaelJS Ereignisse, ich habe eine brauchbare Lösung für jeden. Hier ist ein RaphaelJS Lösung:

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);
};

Code ist nicht luftdicht, sondern veranschaulicht die wichtigsten Punkte.

Ersten, die Ereignisse müssen registriert werden, durch den addEventHandler () - Aufruf. Mit der RaphaelJS onmousemove(), etc., Handler funktioniert nicht auf dem tablet.

Zweite, für touch-Ereignisse, die Sie brauchen, zu Graben, in die Liste berührt. Meine Anwendung kümmert sich nur um einen einzigen finger, und die [0] - Ereignis der Liste ist genug. Es gibt eine Reihe von Listen -- berührt, targetTouches, changedTouches -- so wählen Sie einen passenden aus.

Dritten, zu bestimmen, ob das Fenster muss Blasen-die Ereignisse. Ich bekomme mehr Sensibilität auf Berührungen, wenn ich preventDefault().

Getestet habe ich diese auf einem Google Nexus, iPad 3 und iPad Mini. Gute Ergebnisse.

Ich habe auch eine Lösung für plain-SVG. Es basiert auf dieser site:
http://my.opera.com/MacDev_ed/blog/2010/02/01/how-to-get-all-svg-elements-intersected-by-a-given-rectangle

Sind die Unterschiede für das, was ich benutze und der Javascript verwendet er, ist, dass, wieder, für berührt, der berührt die Liste muss zugreifen. "root" ist das svg-element-ID für dieses Beispiel. "logTrace" ist eine Spanne, die Sie empfängt, Kommentare.

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) + ")";

Getestet hab ich diese Lösung auf ein Nexus und ein iPad erfolgreich. Allerdings verhält es sich so schlecht auf einem iPad Mini-warum Verhalten sich anders bei zwei iPad-Geräten?

Mir ist auch aufgefallen, dass die "plain svg" - Lösung scheint nicht zu erkennen, genau wie die RaphaelJS version. In der Nähe von den Rändern meiner SVG-Elemente die Erkennung ist einfach nicht sehr gut mit der reinen svg-Erkennung. Ich bin konsequent immer gute Ergebnisse für die RaphaelJS verwenden.

OTOH, die RaphaelJS verwenden, ist zu empfindlich, um die SVG mit (fill:none). Der plain-SVG kümmert sich nicht, wenn (fill:none) ist in einem element. Wählen Sie Ihr Gift.