javascript addEventListener auswählen, ohne Kinder

Ich müssen, javascript zu verwenden, die nur für dieses Projekt. Sorry, keine jQuery (ich schäme mich auch).

Ich bin das hinzufügen einer addEventListener an ein div. "Problem" ist, dass es gilt für alle seine Kinder, auch.

Gibt es eine Möglichkeit, dies zu vermeiden, und haben den Hörer nur für das div?

Thankd im Voraus.

mein code sieht wie folgt aus:

document.getElementById(myObj.id).addEventListener("mousedown", myObjDown, false);

function myObjDown() {
  //do stuff here
}
  • Es ist eigentlich nicht hinzufügen das Ereignis für die Kinder (ich vermute, da Sie noch nicht gezeigt-code). Was passiert, ist das event-bubbling. Sie binden wollen, die Veranstaltung in der capturing-phase Abbrechen und die sprudelnden. element1.addEventListener('click',doSomething,true); und event.cancelBubble = true;
InformationsquelleAutor john smith | 2012-12-17
  1. 19

    Können Sie sagen, welches element das Ereignis tatsächlich ausgelöst durch das Lesen event.target in Ihren Rückruf.

    var el = ...
el.addEventListener('click', function(event){
  if (el !== event.target) return;

  //Do your stuff.

}, false);

    Die andere option wäre es, die Handler gebunden, um die untergeordneten Elemente zu verhindern, dass das Ereignis vom erreichen der übergeordneten handler, aber das ist mehr Arbeit, und möglicherweise verbirgt Ereignisse von Dingen, die vielleicht tatsächlich hören für Sie über die Eltern.

    Update

    Ihre Beispiel-code, Sie sollten in der Lage sein, dies zu tun.

    var el = document.getElementById(myObj.id);
el.addEventListener("mousedown", myObjDown, false);

function myObjDown(event) {
  if (el !== event.target) return;

  //do stuff here
}

    Auch als Allgemeinen Hinweis Bedenken Sie, dass, keine wenn dies funktioniert auf IE < 9, weil addEventListener wird nicht unterstützt auf diese.

    • Hier ein jsFiddle, dass ich anfing zu arbeiten auf: jsfiddle.net/NJMKu
    • bitte werfen Sie einen Blick auf meine Bearbeiten, so dass Sie verstehen, wie ich strukturiert es
    • Aktualisiert.
    • Danke. Ich weiß über die IE-Sache, es ist nur so, dass ich es wirklich einfach, javascript als pro client-Anfrage. -.- booring
    • Es ist nicht so schlimm. Ich standard JS den ganzen Tag lang 😀
    InformationsquelleAutor loganfsmyth
  2. 7

    Können Sie die Ereignis-Eigenschaft currentTarget

    el.addEventListener('click', function(event) {
  if (event.currentTarget !== event.target) {
    return;
  }

  //Do your stuff.
}, false);

    Mehr details: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

    InformationsquelleAutor Mario Trucco
  3. 2

    Hier eine alternative, die hält Ihre myObjDown Funktion im Einklang mit einer typischen event-handler. (mit e.Ziel-als Verweis auf die Ereignis-aufrufen-element)

    var CssSelector = "div.className";
var elms = document.querySelectorAll(CssSelector);

for (i = 0; i < elms.length; i++) {
    elms[i].addEventListener("mousedown", myObjDown.bind(null, {"target":elms[i]}, false);
}

function myObjDown(e) {
  console.log("event: %o - target: %o", e, e.target);

  var elm = e.target;
  //do stuff here
}

    Es wurde vorgeschlagen, dass ..

    diese Methode kann Ursache von Speicherlecks mit Versionen von einigen Browsern. Wenn jemand Erfahrungen mit diesem oder hat wertvolle Erkenntnisse. Bitte kommentieren.

    eine alternative, in dieser Hinsicht wäre

    var CssSelector = "div.className";
var elms = document.querySelectorAll(CssSelector);

for (i = 0; i < elms.length; i++) {
    elms[i].addEventListener("mousedown", myObjDown.bind(null, elms[i].id}, false);
}

function myObjDown(id) {
  console.log("element: %o ", document.getElementById(id));

  //do stuff here
}
    InformationsquelleAutor Brett Caswell
Schreibe einen Kommentar