jquery触发按键事件两次

时间:2015-03-18 06:17:23

标签: javascript jquery keyboard-events

我正在制作一个视频播放器,我想控制一些基本的视频动作,如播放,暂停,通过键盘搜索。所以这是我用于获取键盘事件的代码。

$("#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

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

1 个答案:

答案 0 :(得分:3)

最终编辑:道歉这需要一点,这是午夜,我有点累了。

你正在使用错误的活动!忽略我关于焦点的说法,只需将"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();
});

这个工作的原因并不是你想要的最终结果。所有这一切都使得播放/暂停按钮处于焦点位置,所以当有人按下空格键时,浏览器会将其视为单击按钮,而不是因为有人在关注视频时按下了空格。