jquery on触发器按键事件两次

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

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

您使用了错误的事件！忽略我所说的关于焦点的内容，简单地用"keydown"替换"keypress"，它应该可以正常工作。焦点将保持在全屏btn上，但您的事件将正常工作，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();
});

然而，这起作用的原因最终并不是你想要的。所有这些都会使播放/暂停按钮处于焦点位置，因此当有人按下空格键时，浏览器会将其视为点击按钮，而不是因为有人在专注于视频时按下了空格键。