【web】a标签点击时跳出确认框

最新推荐文章于 2025-06-02 19:54:50 发布

michael_ouyang

最新推荐文章于 2025-06-02 19:54:50 发布

阅读量3.9w

点赞数 15

CC 4.0 BY-SA版权

文章标签： web html

本文链接：https://blog.youkuaiyun.com/michael_ouyang/article/details/52765575

本文介绍如何在网页跳转前实现权限验证，包括通过a标签和JavaScript确认框阻止非法访问，以及不同事件触发时机的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求如下：

在跳转链接前，需要判断该用户是否有权限打开页面，没有权限的弹出一个确认框提示“没有权限”，有权限的则直接跳转页面。

参考资料一：
http://jingyan.baidu.com/article/425e69e6d043bebe15fc16db.html

a标签点击时跳出确认框
方法一：

<a  href="http://www.baidu.com" onClick="return confirm('确定删除?');">[删除]</a>

方法二：

<a onclick="confirm(‘确定要跳转吗？')?location.href='www.baidu.com':''" href="javascript:;">百度</a>

参考资料二：

①在html标签中出现提示

<a href="http://www.baidu.com" onclick="if(confirm('确认百度吗？')==false)return false;">百度</a>

②在js函数中调用

function foo(){  
    if(confirm("确认百度吗？")){  
        return true;  
    }  
    return false;  
 }

对应的标签改为：

<a href="http://www.baidu.com" onclick="return foo();">百度</a>

注意事项：

我们这里写的是a标签点击提交出现的跳转事件，表单提交时，也是这么做。
不管怎样，你要记住的是（绝学秘籍），必须将return 写在标签里，否则不管你是否点击确定，都会出现跳转和表单内提交。

以上参考资料总结：

1.跳转的方法：

1>. 把连接放在a元素的href属性中进行页面跳转

2>. 使用location.href进行页面跳转

2.阻止跳转的方法：

在click事件内使用return 或 return false; 返回，不继续执行。——这里引申出一个问题，click事件与href的执行先后顺序

延伸：

click事件与href的执行先后顺序

href=“#” 比click晚触发，因此可以再href出发之前，在click事件内使用return 返回即可。

但也有例外的情况：

如下图所示：

点击按钮后，弹出弹窗，接着跳转入了页面（没做其他操作）

click事件一般会存在250ms的延迟执行时间，目的是为了判断时候是否会继续点击（进行双击操作）。

在移动端的开发，click的延迟执行，可能会导致href被触发！！！（事件冒泡暂不解释）

因此若出现此种情况的出现，可以使用tap事件来代替click事件，即可解决。