如何判断用户是点击了视频元素还是视频控件之一？

Question

问题

有一个带有controls的html5 video元素，如下：

<video class="media video" src="somevid.ogg" controls></video>

并且给它分配了一个点击处理程序：

$('.media.video').on('click', function (event) { /* ... */ });

在处理程序方法中，是否可能确定用户是单击了视频元素还是其中一个控件？

没有找到有关此问题的文档，并在事件对象中搜索线索，但没有成功。

我的备选方案：

1. 将所有侦听器分配给视频，并基于视频更改事件确定点击是否已在控件元素或视频上进行 - 太麻烦和不干净了。
2. 使用自定义控件UI，禁用默认UI - 如果没有答案回答我的问题，我会选择这个。

- Matyas

---

嗨@Matyas - 可以看一下这个链接 - http://www.w3.org/2010/05/video/mediaevents.html，我是从这里找到的 - https://dev59.com/hnTYa4cB1Zd3GeqPqxtK - Rob Sedgwick

你可以尝试使用 console.log(event) 并查看其中是否有任何数据表明控件被点击了。 - Brian Glaz

Answer 1

在处理程序方法中，是否有可能确定用户是仅单击视频元素还是其中一个控件？ 不，浏览器内部提供的控件被认为是视频元素本身的一部分。因此，对元素的点击将仅与该元素注册，而不是子元素。 您可以使用第一种方法来监听相应于单击控件的各种命令事件。我会推荐这种合适的方法。 如果您只需要确定单击是否在视频上，那么您可能可以通过进行简单的高度检查来解决问题，但控件的布局/外观可能会在“下周”更改，并迫使浏览器版本检查以获得准确的高度，这是朝着错误的方向发展。 但例如，在单击/按下或释放鼠标键的事件处理程序中：

var rect = videoElement.getBoundingClientRect(),  // get abs. position of element
    ctrlHeight = 40,                              // a guess of ctrl area height
    y = event.clientY - rect.top;                 // relative y pos. to video el

if (y >= rect.height - ctrlHeight) {...in ctrl area...}

另一种方法，但需要更多的工作量，是像您在第二点中提到的那样提供自己的控件。可以是按钮形式或图像和图像地图形式，甚至可以将它们渲染到画布上。这样可以完全控制其位置、外观等等。

由于您需要监听每个按钮的事件，因此最终可能会得到与第一种方法相同数量的事件处理程序...

- user1693593