Verfolgen Sie ALLE angeklickten Elemente mit JavaScript

Ich will, um zu verfolgen ALLE Elemente, die geklickt werden auf einer HTML-Seite. Ich brauche einen guten Weg, um die Referenz genau, welches element geklickt wurde (also kann ich zum wiedergeben der Klicks auf eine identische separate HTML-Seite später auf).

Ist es ein guter Weg, um Referenz-welches element wurde angeklickt?

Ich könnte hinzufügen, eindeutige id ' s und Klassennamen für jedes einzelne element auf der Seite. Aber ich glaube, es muss ein anderes Weg?

HTML-Seite, die ich wird die Wiedergabe der Klicks auf der identisch sein wird.

Etwas lite dieses (aber genauere Informationen welches element es war, das ist vielleicht möglich, diese zu sammeln)...

Code zu verfolgen, welches element, auf das geklickt wurde

var arrayWithElements = new Array();

document.onclick = clickListener;

function clickListener(e) {
    var clickedElement;
    if(e == null) {
        clickedElement = event.srcElement;
    } else {
        clickedElement = e.target;
    }
    arrayWithElements.push(clickedElement)
    alert(arrayWithElements);
}

Code, der auf eine identische HTML-Seite

document.someHowGetTheElement().onclick();
  • Hinzufügen von IDs für jedes element ist wahrscheinlich der einfachste Weg. Sie können Sie mit JavaScript auch.
  • Was meinst du mit "genauere Informationen" , die derzeit clickedElement geben Sie eine Referenz auf den Knoten, ich weiß nicht, was kann genauer sein als diese.
  • this beziehen sich auf document, nicht das angeklickte element. @Dr. Molle: Er erwähnt die "replay" - die Ereignisse auf einer anderen Seite. Sie können nicht wirklich bestehen oder transfer Referenzen auf DOM-Knoten.
  • Dank DR. Molle. Sagen wir, es sind 100 verschachtelte divs und Bilder. Wie würden Sie wissen, welches Bild geklickt wurde? Bitte helfen Sie, wenn Sie wissen wie! 🙂
  • Dank Felix Kling. Würden Sie nicht vielleicht wissen, eine gute Methode zum hinzufügen von ID zu jedem element? zB. starten Sie auf king1,king2,king3,king4 und so weiter ;D
  • Gut, keine zwei Knoten identisch sind. Wenn Sie einen Verweis auf einen Knoten (event.target) Sie haben das element. Aber es scheint, dass Sie verwenden möchten, dass die Informationen auf einer anderen Seite, in dem Fall müssen Sie die Serialisierung der Referenz irgendwie. Wie ich schon sagte, werden die IDs der einfachste Weg sein kann. Man könnte auch die Generierung der XPath der Knoten, aber das könnte komplizierter sein, um nicht über Browser.
  • Über IDs: Nur einen Zähler und einen Präfix und iterieren über alle Elemente bei gleichzeitiger Erhöhung der Theke. Ob das eine gute Methode ist, hängt von der Anzahl der Elemente, obwohl.
  • Danke Felix 🙂 Aproximatly, wie viele Elemente wird das ID-Verfahren zu einem "schlechten Ansatz"?

InformationsquelleAutor user1087110 | 2012-03-01
  1. 17

    Ich denke, du suchst so etwas:

    var arrayWithElements = new Array();

function clickListener(e) 
{   
    var clickedElement=(window.event)
                        ? window.event.srcElement
                        : e.target,
        tags=document.getElementsByTagName(clickedElement.tagName);

    for(var i=0;i<tags.length;++i)
    {
      if(tags[i]==clickedElement)
      {
        arrayWithElements.push({tag:clickedElement.tagName,index:i}); 
        console.log(arrayWithElements);
      }    
    }
}

document.onclick = clickListener;

    Er speichert bei jedem Klick ein Objekt mit der tagName von dem element und der index.
    So können Sie den Zugriff auf dieses element in einer anderen "Instanz" in diesem Dokument durch die Verwendung 

    document.getElementsByTagName(item.tag)[item.index]

    (wo Element ist ein Element der arrayWithElements)

    Demo: http://jsfiddle.net/doktormolle/z2wds/

    • Beeindruckt! Ich denke, das ist genau das, was ich gesucht habe! Vielen Dank 🙂
    • +1 Gute Idee. Es könnte sein, lohnt sich das Zwischenspeichern der Ergebnisse von getElementsByTagName.
    • Ja tut es, habe ich angewandt, den Vorschlag
    • Sehr schöne demo!
    InformationsquelleAutor Dr.Molle
  2. 1

    Können Sie in diesem Zusammenhang Frage. In anderen Worten, ein guter Weg, zu wissen, welches element angeklickt wurde, ohne das hinzufügen von IDs alle über dem Platz ist die Verwendung von jquery .cssSelectorAsString() Methode. Zum Beispiel:

    function clickListener(e) {
    var clickedElement;
    if(e == null) {
        clickedElement = event.srcElement;
    } else {
        clickedElement = e.target;
    }
    arrayWithElements.push($(clickedElement).cssSelectorAsString()); //<====
    alert(arrayWithElements);
}

    Siehe auch: Einzigartige selector des Elements in Jquery

    • Ich bin nicht mit jquery (vergessen zu erwähnen). Aber ich werde in den xPath-mentod! Danke!
    InformationsquelleAutor Diego
Schreibe einen Kommentar