javascript - 如何防止在 Firefox 中点击 HTML5 视频控件时出现事件冒泡

Question

在 Firefox 中，当视频标签包含在 a 标签中时，在点击视频暂停时使用标准视频控件也会重定向。我怎样才能让它表现得像其他浏览器一样，例如点击暂停只会暂停视频并且不会重定向。这就是我需要的。

这是一个简单的演示:http://jsfiddle.net/me2loveit2/cSTGM/

<a href="http://www.google.com" target="_blank">
    <video controls="" muted="" preload="auto" id="testid" width="500">
        <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"/>
        <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm"/>
        <img src="http://dummyimage.com/1044x585/000/fff"/>
    </video>
</a>

Answer 1

你得到的是无效标记，HTML5 spec明确指出

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

视频导航实际上是包含按钮的交互式内容。

出于某种原因，在 Chrome 中单击控件不会触发 anchor ，而在 Firefox 中会触发。
这取决于浏览器如何使用 Shadow DOM 构造控件，并且由于标记无效并且没有真正的标准，所以这是任何人的猜测。

你应该做的是删除 anchor 并在点击视频时使用 javascript 重定向，就像这样

$('#testid').on('click', function() {
    var win = window.open('http://www.google.com', '_blank');
    win.focus();
});

这会给你有效的标记，因为你可以删除环绕 anchor ，但它也没有解决单击控件时不重定向的问题，它完全一样，因为控件仍在视频中并且在 Firefox 中触发点击处理程序，但在 Chrome 中不触发。

在 webkit 中，控件可能以某种方式被 -webkit-media-controls 伪类作为目标，但是 Firefox 似乎没有任何这样的伪类，所以这不起作用要么。

你剩下的是依赖于控件似乎总是在底部的事实，它们大约有 30 像素高，所以你可以将 anchor 覆盖在视频顶部并略去一点底部的一部分。
这将适用于所有浏览器，并且您将拥有有效的标记。

<video controls="" muted="" autoplay preload="auto" id="testid" width="500">
    <!-- stuff -->
</video>
<a href="http://www.google.com" class="overlay" target="_blank"></a>

为确保 anchor 放置正确且大小正确，可以使用一点 javascript

$('.overlay').each(function() {
    var vid = $(this).prev('video');
    $(this).css({
        position : 'fixed',
        top      : vid.offset().top + 'px',
        left     : vid.offset().left + 'px',
        width    : vid.width() + 'px',
        height   : (vid.height() - 30) + 'px',
    });
});

FIDDLE