Javascript事件委派 - 单击事件不按预期冒泡

Question

我可能在某个地方犯了一个非常简单的错误，但由于某种原因，事件似乎没有正确冒泡。

Javascript相当简单，目前使用jQuery来简化DOM操作，但不想依赖它来进行事件处理。

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();
    }

  }

}）;

用于演示的HTML同样微不足道。

  <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>

正如您在http://jsfiddle.net/SuBQQ/1/上看到的那样，超链接可以正常工作，而点击图像不会触发正确的事件，而是在图像上使用事件（我认为这会冒泡DOM，但看起来我错了）。

我这样做是错的，还是只是遗漏了一些小事？

Answer 1

您的代码的问题是单击图像将目标设置为img DOM对象，然后您的代码测试以查看test_class是否在该对象上。 但是，图像没有那个类。 如果在事件处理程序中设置了断点或警报，则可以看到它正在运行 - 它只是测试图像上是否存在类名失败。

事件由标记处理，页面位置已更改，因此文档事件处理程序无法对其执行任何操作。 如果您将链接上的href更改为“＃”，以便它不会将页面更改为实验并在您的单击处理程序中进行一些调试，您将看到它确实冒泡到文档。 但是，在你的jsfiddle中，它不起作用，因为链接正在处理文档之前的事件并更改页面。

请参阅此演示： http ： //jsfiddle.net/jfriend00/7a9Ha/ 。