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上，但显然我错了）。

我是做错了什么，还是只是忽略了一些小细节？

- djlumley

Answer 1

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

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

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

- jfriend00

---

我理解这个，但是以为事件会冒泡到超链接？ - djlumley

我在我的答案中添加了更多的解释。简而言之，<a>链接在事件到达文档之前改变了页面，即使事件到达文档，目标仍然是没有类的img。因此，你需要修复两个问题。 - jfriend00

正确。那么相对于原帖，您的jsfiddle有什么不同之处，我感到困惑了。 - AlexQueue

@AlexQueue - 我不记得了。这是18个月前的事了。 - jfriend00

@jfriend00 没错。我认为某些东西发生了变化，所以它现在不能按预期工作。只是提供信息。 - AlexQueue