【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事件,即可解决。

最新文章

  1. Requests库练习
  2. 页面上使用 Thymeleaf 的内联js不当造成了 java.lang.StackOverflowError: null 问题
  3. Win8下Visual Studio编译报“无法注册程序集***dll- 拒绝访问。请确保您正在以管理员身份运行应用程序。对注册表项”***“的访问被拒绝。”问题修正(转)
  4. eclipse不能新建server
  5. 配置文件的生成,关于“make menuconfig”
  6. BC之jrMz and angles
  7. poj 1006 生理周期(中国剩余定理)
  8. LightOJ 1370 Bi-shoe and Phi-shoe 欧拉函数+线段树
  9. python成长之路第三篇(2)_正则表达式
  10. POJ 1459 Power Network(网络流 最大流 多起点,多汇点)
  11. Robot Framework和Selenium 2 Grid集成指南
  12. Jenkins2 实现持续交付初次演练(MultiJob,Pipeline,Blue Ocean)
  13. 关于AJAX使用中出现中文乱码的问题
  14. shell - shift
  15. Ubuntu16.04安装Python3.6 和pip(python3 各版本切换)
  16. [HDFS Manual] CH4 HDFS High Availability Using the Quorum Journal Manager
  17. python项目练习
  18. 实现一个jsp同时提交两个form到两个Servlet
  19. Error: spawn Unknown system errno 203
  20. 关于vue中eslint规范报错问题

热门文章

  1. 循环插入oracle 存储过程
  2. 解决Jquery向页面append新元素之后事件的绑定问题
  3. 高级javaScript程序形成过程(进阶)
  4. VS2015 之 多行缩进
  5. Selenium2(webdriver)入门之TestNG的安装与简单使用
  6. localStorage 和 sessionStorage 的用法
  7. JAVA设计模式——第 8 章 适配器模式【Adapter Pattern】(转)
  8. java笔记整理
  9. Linux使用笔记
  10. JAVA——泛型类和泛型方法(静态方法泛型)