javascript - 如何检测 'useless' 点击 HTML5 视频标签？

Question

我只需要检测不触发任何操作的点击。请参见下面的示例。

http://jsfiddle.net/SdNL5/1/

<video id="video" width="320" height="240" src="http://vjs.zencdn.net/v/oceans.mp4" controls>
     <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

var video = document.getElementById("video");
video.onclick = function(){
    alert("This click is useless");
};

在这种情况下，当用户点击视频时，他会收到一条提醒消息。但是，问题是，我不希望在用户单击播放按钮、暂停按钮或音量控制时显示警告消息。我希望它仅在用户单击视频而不是任何按钮时显示。之后我还需要打开一个弹出窗口，所以我不能使用 setTimeout 或类似的方法来让浏览器不阻止弹出窗口。

我知道我可以读取坐标并计算是否有按钮，但我更喜欢其他解决方案。

Answer 1

我问了一个与这个非常相似的问题。( How to prevent event bubbling when clicking on HTML5 video controls in Firefox )

我知道在不同的浏览器中始终如一地做到这一点的唯一方法是在视频上覆盖，然后在该覆盖上自定义控件。原因有几个。例如“无用”点击将取决于浏览器:

• Firefox 将在点击视频时切换播放/暂停。
• IE 会有一个“无用的”点击，但双击会进入全屏。
• Chrome 和 Safari 将出现“无用”点击

但是，如果您不关心 Firefox，那么此示例对您有用，但仅适用于 Chrome、Safari 和 IE:http://jsfiddle.net/me2loveit2/cSTGM/40/

<a href="javascript: alert('Nothing');">
   <video ...
   </video>
</a>