Question

I need to use javascript only for this project. Sorry, no jQuery (I feel ashamed as well).

I am adding an addEventListener to a div. “Problem” is that it applies to all its children, too.

Is there a way to avoid this, and have the listener work only for that div?

Thankd in advance.

---

my code looks like this:

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

function myObjDown() {
  //do stuff here
}

Answer 1

You can tell which element the event actually fired on by reading event.target in your callback.

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

  // Do your stuff.

}, false);

The other option would be to have handlers bound to the child elements to prevent the event from reaching the parent handler, but that is more work and potentially hides events from things that might actually be listening for them above the parent.

Update

Given your example code, you should be able to do this.

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

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

  //do stuff here
}

Also as a general note, keep in mind that none if this will work on IE < 9 because addEventListener is not supported on those.