javascript - 通过单击控件切换的 html5 onClick

Question

我向我的视频元素添加了一个事件侦听器，以便用户可以通过单击元素上的任意位置来播放或暂停视频。我注意到即使我单击视频控件（例如更改音量滑块），事件也会触发，这显然不是我的意图。

有一个相对简单的解决方法吗？

Answer 1

您可以使用接受事件参数的函数来处理视频元素的 onclick 事件。这个事件参数将填充大量关于鼠标点击的数据，包括它在图层中的 X/Y 位置（应该是视频标签）

只有当点击在视频的某些区域时，您才能从那里触发播放/暂停事件。我在下面提供了一个示例，我们处理视频中除底部 50 像素以外的所有地方的点击。

document.getElementById("videoElement").onclick = function(ev){
    var vid = document.getElementById("videoElement");
    var heightOfControls = 50; 
// You'll have to figure out a good height to use for your unclickable region where the controls are.
// I used 50 pixels as an example.
    var areaAboveControls = vid.height - heightOfControls;

// the layerY attribute of the event lets us know where the mouse was within the topmost layer when the click occurred.
// Using this we can find out where we are in the video and react accordingly.
// Remember that 0 is at the top of the screen on the Y axis, so we need to use greater than to find out if it's BELOW
// our area above the controls.
    if(ev.layerY > areaAboveControls)
    {
        alert("Clicked controls!");
    }
    else
    {
        alert("Did not click controls");
        // Raise play/pause event from here since the controls won't handle the event and we can safely toggle play/pause.
    }
};

通过一些实验，您应该能够为 heightOfControls 找到一个不错的值，它可以为您提供您正在寻找的行为。

小提琴：http: //jsfiddle.net/hTYck/4/

希望这可以帮助！