Javascript 超链接包装视频标记-单击处理程序的目标设置错误

我遇到了这种奇怪的情况，希望有人能给我解释一下

鉴于此代码：

  <a id="foo" href="http://www.google.com/">
    <video width="400" controls>
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
    </video>
  </a>
  <script type="text/javascript">
  (function() {
    'use strict';

    var wrapper = document.getElementById('foo');

    wrapper.addEventListener('click', function(e) {
      e.preventDefault();

      console.log('Clicked', e);
    });
  }());
  </script>

---

为什么目标总是视频标记而不是a标记？

如果您指的是e.target，它指的是单击的元素，即视频标记。单击事件时，标记没有事件处理程序，因此不会执行任何操作。然后，事件被引发并冒泡到具有您指定的事件处理程序的父元素标记。可以在事件处理程序中使用此选项访问标记

---

为了清楚地理解正在发生的事情，请阅读事件冒泡主题。

target在哪里，你是指e.target吗？具体来说，我想知道为什么a标记似乎从未触发我附加的事件侦听器。我不会停止传播。