Question

I have a div

<div class="myDiv">
  <a href="#" class="myLink">somelink</a>
  <div class="anotherDiv">somediv</div>
</div>  

Now, using event delegation and the concept of bubbling I would like to intercept clicks from any of myDiv, myLink and anotherDiv.

According to best practices this could be done by listening for clicks globally (hence the term ‘delegation’) on the document itself

$(document).click(function(e) {
  var $eventElem = $(e.target);
  var bStopDefaultClickAction = false;

  if ($eventElem.is('.myDiv'))
  {
    alert('Never alerts when clicking on myLink or anotherDiv, why????');
    bStopDefaultClickAction = true;
  }

  return bStopDefaultClickAction;
});

See my alert question above. I was under the impression that clicks bubble. And it somewhat does because the document actually receives my click and starts delegating. But the bubbling mechanism for clicks on myLink and anotherDiv doesn’t seem to work as the if-statement doesn’t kick in.

Or is it like this: clicks only bubble one step, from the clicked src element to the assigned delegation object (in this case the document)? If that’s the case, then I need to handle the delegation like this:

$('.myDiv').click(function(e) {
  //...as before
});

But this kind of defeates the purpose of delegation as I now must have lots of ‘myDiv’ handlers and possibly others… it’s dead easy to just have one ‘document’ event delegation object.

Anyone knows how this works?

Answer 1

The event target will not change. You need to mirror what jquery live does and actually check if $eventElem.closest(‘. myDiv’) provides a match.

Try:

$(document).click(function(e) {
  var $eventElem = $(e.target);
  var bStopDefaultClickAction = false;

  if ( $eventElem.closest('.myDiv').length )
  {
    alert('Never alerts when clicking on myLink or anotherDiv, why????');
    bStopDefaultClickAction = true;
  }

  return bStopDefaultClickAction;
});