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();
});

這個工作的原因並不是你想要的最終結果。 所有這一切都使得播放/暫停按鈕處於焦點，所以當有人按下空格鍵時，瀏覽器會將其視為單擊按鈕，而不是因為有人在關注視頻時按下了空格。