超链接包裹的视频标签 - 错误的目标设定为点击处理

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> 

为什么是“目标”总是视频标签，而不是“a”标签？

Answer 1

如果您的意思是e.target，它指的是clicked元素，它是视频标签。在点击事件中，<video>标记没有事件处理程序，因此不执行任何操作。然后将事件提升（冒泡）到具有您指定的事件处理程序的父元素<a>标记。可以使用this在事件处理程序中访问<a>标记

要了解清楚发生了什么，请阅读有关“事件冒泡”主题。