Question

按下F5时，我需要调用一个函数。在研究此功能时，我发现此功能有效-在控制台中显示一条消息并弹出一个警报窗口：

<script>
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) {
            console.log("f5 pressed");
            alert("f5 pressed");
            wasPressed = true; }
}
</script>

但是我不希望弹出窗口，我只想调用一个函数。当我注释掉行警报时（“按下f5”）； console.log不再显示在控制台中。这意味着没有警报消息，我将无法调用其他函数。

我需要拦截F5，因为我的网站由Ajax填充，并且我想按F5时重新填充Ajax构建的页面。现在就这样不会在F5上重建页面，它只是重新加载原始页面结构。

我的问题是：如何在不显示警报框的情况下按F5调用函数？

此问题与上面提出的重复问题并不重复，因为我不想禁用F5按钮，只需对其进行拦截即可。以下是我正在寻找的两个答案。

Answer 1

F5在许多浏览器中重新加载页面。

有了警报，警报会在浏览器重新加载之前弹出，因此您可以在控制台中查看日志，直到关闭弹出窗口为止。

在没有警报的情况下，日志被写入控制台，然后浏览器立即重新加载页面，清除日志。

您可以尝试阻止默认行为：

function fkey(e) {

    if (e.keyCode == 116) {
        e.preventDefault();

        // do stuff...
    }
}

但是，我建议您不要阻止F5之类的标准密钥，因为这可能会带来糟糕的用户体验。当然，这完全取决于谁在使用它以及您在做什么。用你的判断。

Answer 2

如果要通过F5键禁用刷新操作，则需要使用以下命令：

const disableRefreshFunction = (e) => { 
    if (e.keyCode === 116) {
        e.preventDefault();
    } 
};

Answer 3

请注意，您只需要侦听keydown事件，该事件会在其他关键事件之前触发。 keypress和keyup对于某些键将触发得太晚，并且浏览器或主机操作系统在到达事件之前已经消耗了该事件。

这应该是您入门所需的一切。

点击下面的运行代码段，以查看如何捕获每个击键并防止其默认行为-

const preventDefault = f => event =>
  ( event.preventDefault()
  , f(event)
  )
  
const logKeypress = event =>
  console.log(event.which)
  
window.addEventListener('keydown', preventDefault(logKeypress))

h1 { font-family: sans-serif; }

<h1>click here, then press any keys...</h1>

此技术向您展示了如何分离事件函数以及它们如何以可重用的方式组合起来。摘自我对this question的回答。

如何在F5键上调用JavaScript

3 个答案: