Javascript addEventListener без выбора детей

Мне нужно использовать javascript только для этого проекта. Извините, нет jQuery (мне тоже стыдно).

Я добавляю addEventListener в div. "Проблема" заключается в том, что она распространяется и на всех ее детей.

Есть ли способ избежать этого, и слушатель работает только для этого div?

Спасибо заранее.

мой код выглядит следующим образом:

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

function myObjDown() {
  //do stuff here
}

Ответы

Ответ 1

Вы можете указать, на каком элементе произошло событие, на котором было выполнено чтение, event.target в вашем обратном вызове.

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

  // Do your stuff.

}, false);

Другой вариант заключается в том, чтобы обработчики привязывались к дочерним элементам, чтобы предотвратить получение события от родительского обработчика, но это больше работает и потенциально скрывает события от вещей, которые могут фактически прослушивать их выше родителя.

Update

Учитывая ваш пример кода, вы сможете это сделать.

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

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

  //do stuff here
}

Также как общее примечание, имейте в виду, что ни один, если это будет работать на IE < 9, потому что addEventListener на них не поддерживается.

Ответ 2

Вы можете использовать свойство события currentTarget

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

  // Do your stuff.
}, false);

Более подробная информация: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Ответ 3

Здесь альтернатива, которая сохраняет вашу функцию myObjDown в соответствии с типичным обработчиком событий. (используя e.target в качестве ссылки на элемент вызова события)

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
}

Было высказано предположение, что..

этот метод может вызвать утечку памяти с версиями некоторых браузеров. Если кто-либо испытывает это или имеет ценную информацию. Прокомментируйте.

альтернативой в этом отношении будет

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
}