Question

通常情况下，我们可以阻止使用带有javascript的F5进行页面刷新，如下所示

if (keyCode == 116)
  event.preventDefault();

但是我希望当光标在URL上时阻止F5刷新工作。这不是应用程序刷新，这是一个页内浏览器刷新。当光标在URL上并且用户按下F5键时，页面将刷新。我需要阻止这一点。

请帮帮我。

Answer 1

你不能阻止这种情况发生。一旦页面上的焦点丢失（即当您在URL栏中单击时），javascript将不再接收键盘事件。

但是，您可以向用户显示一条消息，警告他们即将离开该页面。

window.onbeforeunload = function(){
    return "Your message here";
};

当用户尝试离开页面（或刷新页面）并可以选择离开或停留在页面上时，系统会提示用户显示该消息。你不能完全阻止用户重新加载，但如果他们这样做，你可以让它听起来真的很可怕。

Answer 2

您无法检查鼠标光标是否在URL上，但您可以检查光标是否位于[0,0]

位置

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}

$(document).on("keydown", function(e){
    if ((e.which || e.keyCode) == 116 && (cursorX == 0 && cursorY == 0))
        e.preventDefault();
});

如果cursorX和cursorY等于0，则阻止您的操作

Answer 3

您可以使用 onmouseover 来跟踪鼠标何时在网址上，然后您可以使用 onmouseout 来跟踪它何时离开网址。请参阅以下示例。

<a onmouseover="overIsTrue()"
   onmouseout="overIsFalse() href="http://www.yourpage.com">here</a>

//keep track of the mouse state
var overURL = false;

window.addEventListener('keydown', function (event) {

    // if the key is 116 and the mouseover is true
    if (event.keyCode === 116 && overURL) {

        // prevent default behaviour
        event.preventDefault();

        return false;
    }

});

//mouse over is true
function overIsTrue() {
    overURL = true;
}

//mouse over is false
function overIsFalse() {
    overURL = false;
}

光标在URL上时如何防止f5

3 个答案: