javascript - 动态设置 href 时阻止 anchor 重定向

Question

我的页面上有一个 anchor ，如下所示:<a id="login" href="login.php"></a>

但是，当用户在页面中输入数据时，为了在进入登录页面时不丢失该数据(数据可以在不登录的情况下保存)，我通过取出href来更改它并添加一个onclick来警告用户，如下:

if (-code which checks for user input-){
        $('#login').attr('href','javascript:void(0)');$('#login').attr('onclick','logincheck()');
        }
function logincheck(){
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again."); 
$('#login').attr('onclick','');$('#login').attr('href','login.php');
}

因此用户收到警告，现在他可以再次单击登录按钮进行登录。

由于某种原因我遇到的问题是 $('#login').attr('href','login.php');使页面立即重定向。我猜这是因为我们仍然处于 anchor 点击的中间。

如何更改此 href，但在再次单击按钮之前阻止页面实际重定向？我尝试添加 return false但这没有帮助。

提前致谢!

Answer 1

为什么不将其合并为一个项目？

$('#login').on('click',function(e){
    if($(this).data('clicked')!=='true'){
        e.preventDefault();
        alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
        $(this).data('clicked','true');
    }
});

这将阻止第一次执行该操作，提供警报，并为其提供点击数据以显示它已被点击。第二次不满足if条件，继续登录。

这避免了 javascript:void(0) 位，以及任何 onclick 属性...所有内容都包含在您的 JS 文件中。