在javascript中使用window.onbeforeunload事件中的window.event.keyCode捕获f5按键事件始终为0而不是116

Question

我正在创建一个 MVC 应用程序。有必要在关闭应用程序（即窗口/选项卡）时将会话中的变量设置为 null，但在刷新应用程序时则不需要。 我通过以下代码尝试了。

<script type="text/javascript">
           window.onbeforeunload = function (e) {
               e = e || window.event;
               if (window.event.keyCode == 116) {
                   alert("f5 pressed");
               }
               else {
                   alert("Window closed");
                   //call my c# code to make my variable null, eg:Session["myVariable"] = null;
               }  
           };
</script>

但是当按下 F5 时，“window.event.keyCode”始终为 0 而不是 116。 因此，即使按下 F5 键，我的变量也会变为空，这不是我的要求。

即使应用程序（即网页）关闭，即使如此，它的值仍为 0（这可能是正确的）。

请注意，以上部分代码位于 .cshtml 文件中。

谁能告诉我哪里错了？

Answer 1

如果你想让它在跨浏览器上工作，你必须监听不同的事件+你必须在每次按下按键时监听按键事件，而不是在加载时监听：

document.onkeydown = fkey;
document.onkeypress = fkey
document.onkeyup = fkey;

var wasPressed = false;

function fkey(e){
        e = e || window.event;
       if( wasPressed ) return; 

        if (e.keyCode == 116) {
             alert("f5 pressed");
            wasPressed = true;
        }else {
            alert("Window closed");
        }
 }

这里是一个演示：http://jsfiddle.net/FSrgV/1/embedded/result/

但是如果您只是想知道用户是否退出页面，您可以简单地使用

window.onbeforeunload

：https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Answer 2

不要使用

e.keyCode == 116

，而使用

e.code == 'F5'

。

 function fkey(e){
    e = e || window.event;
   if( wasPressed ) return; 

    function fkey(e){
        e = e || window.event;
        if (e.code === 'F5') {
            alert("f5 pressed");
            wasPressed = true;
        }else {
            alert("Window closed");
        }
    }

这是因为“t”和“F5”都使用键码编号 116。如果您单独使用键码，那么如果用户按“t”键，您的页面将刷新。

Answer 3

你可以这样写：

$(document.body).on("keydown", this, function (event) {
    if (event.keyCode == 116) {
        alert('F5 pressed!');
    }
});

Answer 4

document.onkeydown = disableF5;
document.onkeypress = disableF5
document.onkeyup = disableF5;    
function disableF5(e) { if ((e.which || e.keyCode) == 116) e.preventDefault(); };

Answer 5

修改后的版本，按“t”后也可以工作。

84 之后自动按下 116 键

document.onkeydown = fkey;
document.onkeypress = fkey
document.onkeyup = fkey;

var wasPressed = false;

function fkey(e){
    e = e || window.event;
   if( wasPressed ) return; 

    if (e.keyCode == 116) {
         alert("f5 pressed");

    }else {
        alert("Window closed");
    }
    wasPressed = true;
}

Answer 6

不要使用 (e.keyCode == 116) 来检查 F5 ；而不是使用这个

<script>
    document.onkeydown = capturekey;
    document.onkeypress = capturekey;
    document.onkeyup = capturekey;

    function capturekey(e) {
        e = e || window.event;
        //debugger
        if (e.code == 'F5') {
            if (confirm('do u wanna to refresh??')) {
                //allow to refresh
            } 
            else {
                //avoid from refresh
                e.preventDefault()
                e.stopPropagation()
            }
        }
    }
</script>

Answer 7

我同意meo的解决方案，但我会添加一些修改。

当我们使用 document.onkeydown = fkey;例如，在页面中，我们有另一个影响 document.onkeydown 的方法，那么浏览器将仅检测最后一个事件。 但是当我们使用： jQuery(文档).on("keydown",fkey);即使我们有另一个函数来处理 keydown 事件，所有函数都会被触发。

请参阅下一个示例以更好地理解：

var wasPressed = false;
document.onkeydown = f1;
document.onkeydown = f2;

jQuery(document).on("keydown",f3); 
jQuery(document).on("keydown",f4); 
function f1(e){
e = e || window.event;
if( wasPressed ) return; 

        if (e.keyCode == 116) {
             alert("f5 pressed");
            wasPressed = true;
        }else {
            alert("Window closed");
        }
}
function f2(){
    alert('f2');
}
function f3(){
    alert('f3');
}
function f4(){
    alert('f4');
}

此处显示的内容：仅 3 个警报：f2、f3 和 f4。并且在此示例中未触发 f1 函数。