Question

I’m probably making a really simple error somewhere, but for some reason the event doesn’t seem to be bubbling properly.

The Javascript is fairly trivial, uses jQuery at the moment for ease of DOM manipulation but don’t want to rely on it for event handling.

jQuery(document).ready(function($) {

  document.onclick = function(event) {

    event = event || window.event;
    var target = event.target || event.srcElement;

    var target_class= target.className.toLowerCase();

    if(target_class.indexOf('test_class') >= 0)
    {
        $('#log').append('<p>clicked!</p>');
        event.preventDefault();
    }

  }

});

The HTML for the purpose of demonstration is similarly trivial.

  <a href="" class="test_class">text</a>
  <a href="http://www.google.com" class="test_class"><img src="http://img810.imageshack.us/img810/9111/trianglesl.png"></a>

  <div id="log">
    <h3>Log</h3>
  </div>

As you can see at http://jsfiddle.net/SuBQQ/1/ the hyperlink works, whereas clicking on the image doesn’t trigger the correct event, and instead uses the event on the image (which I thought would then bubble up the DOM but it appears I’m wrong).

Am I doing this all wrong, or just missing something small?

Answer 1

The issue with your code is that clicking on the image sets the target to the img DOM object and then your code tests to see if test_class is on that object. But, the image doesn’t have that class. If you set a breakpoint or an alert inside the event handler, you can see that it is working – it’s just your test for the presence of the class name on the image that fails.

The event is handled by the tag and the page location is changed so there’s no opportunity for the document event handler to do anything with it. If you change the href on the link to “#” so it doesn’t change the page as an experiment and put some debugging in your click handler, you will see that it does bubble up to the document. But, in your jsfiddle, it doesn’t work because the link is processing the event before the document and changing the page.

See this for a demo: http://jsfiddle.net/jfriend00/7a9Ha/.