问题

Question

问题

拥有带video的html5 controls元素，例如：

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

并为其分配了一个点击处理程序：

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

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

Haven没有找到关于这个的文档，并在事件对象中搜索线索，但没有成功。

我的替代解决方案：

将所有侦听器分配给视频，并根据视频更改事件确定是否已在控制元素上进行了点击，或视频 - 是否太麻烦＆amp;不洁
使用自定义控件用户界面，默认为禁用 - 如果我的问题没有答案，请使用此。

Answer 1

是否可以在处理程序方法内部确定用户是否可以只需点击视频元素或其中一个控件？

不，控件被视为视频元素本身的一部分，因为它们是由浏览器在内部提供的。因此，单击该元素只会注册该子元素，而不是子元素。

您可以使用您的＃1点来收听与单击控件相对应的各种命令事件。 IMO我推荐的正确方法。

如果你只需要确定视频上是否有点击，你可能会做一个简单的高度检查，但控件的布局/外观可能会改变＆＃34;下周＆＃34;并强制进行浏览器版本检查以获得准确的高度，这是错误的方向。

但是，例如，在click / mousedown或mouseup的事件处理程序中：

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

另一种方法，但更多的工作，就是在你的观点＃2中提供你自己的控制。既可以是按钮，也可以是图像和图像的形式，甚至可以将它们渲染到画布上。这使您可以完全控制放置，外观等。

你可能会得到与第一种方法相同数量的事件处理程序，因为你需要听取每个按钮的事件......

如何判断用户是否点击了视频元素或其中一个视频控件？

问题

我的替代解决方案：

1 个答案: