jquery触发按键事件两次

Question

我正在开发视频播放器，我想通过键盘控制一些基本的视频操作，例如播放、暂停、搜索。下面是我用来获取键盘事件的代码。

$("#video_container_div").on("keypress", function (e) {
    e.preventDefault();
    e.stopPropagation();
    switch (e.which) {
    case 32:
        { // space
            console.info("I am in keyboard controls");
            $("#playpausebtn").click();
            break;
        }
    default:
        return;
    }
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
    console.info("I am in fullscreen")
    fullscreenFun();
});

现在我面临的问题是，如果用户单击全屏按钮然后按空格键，该事件会触发两次。http://202.164.44.244/products/trunk/video_player/sample1.htm 首先它播放/暂停视频，然后自动触发全屏或任何最后一个焦点事件。

如果我按下全屏按钮，然后按空格键，那么控制台会显示：

I am in fullscreen
I am in keyboard controls
I am in fullscreen  

在另一个堆栈问题中，有人给出了类似问题的答案

https://stackoverflow.com/a/17936661/1652512

这是播放器的链接：

http://202.164.44.244/products/trunk/video_player/sample1.htm

但我需要具体的解决方案。这个问题已经花了我一整天的时间。

Answer 1

最终编辑：抱歉，这花了一点时间，现在是午夜，我有点累了。

您使用了错误的事件！忽略我所说的关于焦点的内容，只需将"keypress" 替换为"keydown"，它应该可以正常工作。焦点将保留在 fullscreenbtn 上，但您的事件将正常工作，e.stopPropagation() 足以防止事件多次触发。您的代码应为：

$("#video_container_div").on("keydown", function (e) {
    e.preventDefault();
    e.stopPropagation();
    switch (e.which) {
        case 32:
        { // space
            console.info("I am in keyboard controls");
            $("#playpausebtn").click();
            break;
        }
        default:
            return;
    }
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
    console.info("I am in fullscreen")
    fullscreenFun();
});

我认为您在多次触发事件时使用 stopPropagation 有点奇怪。

这里值得注意的是，这只会在video_container_div 或其中的元素被聚焦时触发。 "keydown" 和 "keypress" 需要在不使用 JavaScript 的情况下触发焦点（例如，如果需要，可以调用 .trigger("keydown")）。如果有人关注页面上的另一个元素或刚刚打开页面（没有任何关注），"keydown" 事件将不会触发。

---

当您单击全屏按钮，然后将全屏按钮置于焦点位置时，因此当您按下空格键时，它会触发您所做的按键事件并计为一次点击，因为许多浏览器认为空格或输入按键是当焦点对准某物时点击。

尝试添加

$("#video_container_div").focus();

到你的结尾

$("#fullscreenbtn").click(function () { 

从 fullscreenbtn 元素中移除焦点并查看它是否仍然触发两次的事件。

编辑：查看了您网站上的确切代码，我添加了它，它对我有用

$(h + t.$fulScrnBtn).click(function () { //bind click event on fullscreen button
    fullscreenFun();
    $(h + t.$plyBtn).focus();
});

但是，它起作用的原因最终并不是您想要的。所有这一切都会使播放/暂停按钮成为焦点，因此当有人按下空格键时，浏览器会将其视为对按钮的点击，而不是因为有人在关注视频时按下了空格。