Javascript get "clicked" - element addEventListener

Ich weiß, dass ich ergreifen können, um das element eine individuelle ID.

Jedenfalls kann ich mich attach listener des parent-div, und übergeben Sie die ID der jeweiligen Spanne, auf die geklickt wurde?

<div id = "divId">
  <span id="one"></span>
  <span id="two"> </span>
 </div>

JS

document.getElementById("two").addEventListener("click", someFunction);
  • Können Sie das ein wenig klarer? Klingt wie Sie wollen zu Lesen, auf " Ereignis-bubbling aber nicht völlig sicher.
  • Was? Sie möchten die angeklickte element? event.target, um einen Verweis auf ein Tatsächliches element, welches geklickt wurde.
  • Auch dieses stackoverflow.com/questions/48239/...
  • Wenn keine der Antworten Arbeit oder wollte Sie etwas anderes, lassen Sie mich wissen, damit ich helfen kann
  • Ja, ich kann nicht scheinen, um die span id wenn ich auf die span
InformationsquelleAutor Doc Holiday | 2015-06-11
  1. 6

    Können Sie die event - Objekt und den Zugriff auf Ihre target Eigenschaft

    JS:

    document.getElementById("divId").addEventListener("click", someFunction);

function someFunction(event) {
  console.log(event.target.id);
}

    HTML:

    <div id="divId">
  <span id="one">one</span>
  <span id="two"> two</span>
</div>

    • ist ein Standard-Objekt gebunden-Handler in js
    • Ich kann mich irren, aber ich dachte event war wie arguments wo Sie darauf zugreifen können, ohne es in
    • Es ist nicht. In älteren IEs war es ein globales Objekt, obwohl.
    • interessant. Danke für die Korrektur.
    • aus Neugier, wie war es, vor der Arbeit, wenn ich nicht übergibt?
    • Es war nicht, ich sah "ReferenceError: event ist nicht definiert" auf meiner Konsole. Jetzt funktioniert es. - Sorry, ich vergaß, Chrome implementiert hat, die Globale event zu, aber es ist nicht ein Teil von jedem standard. Ich bin auf FF, die hat den Fehler
    • oh, ok. Es funktionierte für mich auf chrome. Also diese auf jeden Fall scheint wie eine instabile Verwendung für cross-Browser... nochmals vielen Dank für den nützlichen Tipp
    • wenn ich ein alert...es wird nur geben Sie mir die ID der div. Wenn ich auf die Spannweiten der alert erscheint und seine leer???
    • interessant. Verwenden Sie den code aus meiner letzten Antwort? welchen browser verwenden Sie? können Sie replizieren in eine Geige?
    • jsfiddle.net/8t9cqyqd
    • ok, dachte es sich. Für den Fall der leer-Alarm, es war die Alarmierung einer inneren Spannweite, die auf den geklickt wurde, der hatte keine id. Für andere Fälle der Alarmierung 'divId' dies ist, weil die span Immobilien nicht decken diesen Bereich. Zu wissen, span Immobilien, überprüfen Sie das element und seinen Blick auf highlihgt. Immer daran denken, die inneren span meisten angeklickt wird, werden die Ereignis.Ziel. Sehen Sie die Alarmierung der sub umfasst hier jsfiddle.net/8t9cqyqd/1
    • gerade kommt post, dass ich die ID ' s auf der falschen überspannt!! Danke für das helfen mich mit diesem!
    • froh, dass es geholfen 🙂

    InformationsquelleAutor AmmarCSE
  2. 2

    Wenn der Benutzer klickte auf einen Knoten, der ein Kind des Elements der user wollte testen e.target werden einem anderen Knoten. Der sinnvolle Weg, um dies zu überprüfen, ist heute zu hören auf der Dokument-Ebene und Durchlaufen den Pfad (oder eine delegation Bibliothek, von denen gibt es viele):

    Fügen Sie einen Ereignis-listener, um das Dokument:

    const isOnId = (path,id) => path.some(element => element.id === id);

document.addEventListener('click',function(e) {
  if(isOnId(e.path,'two')) {
    //you clicked on or in element with an id two
  } else {
    //you clicked on something else
  }
});
    • sehr gute Idee.
    InformationsquelleAutor Adam
Schreibe einen Kommentar