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

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

 

https://blog.csdn.net/michael_ouyang/article/details/52765575
需求如下：

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

 

 

参考资料一：
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>

 

参考资料二：
http://blog.csdn.net/wujiangwei567/article/details/40352689

①在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的执行先后顺序

http://www.jb51.net/article/51448.htm

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

 

 

 

但也有例外的情况：

如下图所示：

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

 

 

 

 

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

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

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