Question

我遇到了这种奇怪的情况，希望有人向我解释这个......

鉴于此代码：

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

为什么＆＃34;目标＆＃34;总是视频标签而不是＆＃34; a＆＃34;标记

Answer 1

如果您的意思是e.target，它指的是被点击的元素，即视频标记。在单击事件上，<video>标记没有事件处理程序，因此不执行任何操作。然后将事件引发（冒泡）到父元素<a>标记，该标记具有您指定的事件处理程序。可以使用事件处理程序

中的<a>访问this标记

要清楚了解发生的事情，请阅读有关事件冒泡主题的内容。

包含视频标记的超链接 - 单击处理程序的错误目标集

1 个答案: