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

【web】a标签点击时跳出确认框的更多相关文章

  1. a标签点击时跳出确认框

    在做一些删除等的操作时,在跳转链接前,需要弹出一个确认框确认,避免误点. 方法一: <a  href="http://www.baidu.com" onClick=" ...

  2. 去除input标签点击时的默认样式

    去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框

  3. 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序

    1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...

  4. 去除ios系统a标签点击时的灰色背景

    使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景,想要去掉的话可以用下面这种方式 a,a:hover,a:active,a:visited,a:link,a:f ...

  5. 移动端去掉a标签点击时出现的背景

    之前做移动端的Portal时,手机上测试,点击a标签总是出现一个背景框 在CSS中添加 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);就可以了 a:act ...

  6. Trick:如何去掉html标签点击时的蓝色边框

    我们在用html标签时,如input.button.select,img标签时,点击标签经常出现一个蓝色的边框,这个边框真的很low,想要去掉怎么办   其实,css有样式可以设置一下,这个问题就轻松 ...

  7. html页面多个a标签点击时显示不同的样式

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  8. 超链接 a 标签点击时,弹出提示框,可以按照如下来写

    onclick="return confirm('确定删除该条记录?')" 加上这条记录后,就可以在访问href属性指向的链接时,有弹出提示

  9. 20160622001 GridView 删除列 用模板实现删除时提示确认框

    GridView在使用CommandField删除时弹出提示框,在.net2005提供的GridView中我们可以直接添加一个 CommandField删除列:<asp:CommandField ...

随机推荐

  1. mysql错误用法insert into where

    mysql中给表中插入数据,一般使用insert into. 但是在插入数据时,有时会根据条件来插入数据,比如insert into t_person(num,name) values(1,'lily ...

  2. Effective Modern C++翻译(3)-条款2:明白auto类型推导

    条款2 明白auto类型推导 如果你已经读完了条款1中有关模板类型推导的内容,那么你几乎已经知道了所有关于auto类型推导的事情,因为除了一个古怪的例外,auto的类型推导规则和模板的类型推导规则是一 ...

  3. 题目连接:http://acm.zznu.edu.cn/problem.php?id=1329

    题目大意: 定理:把一个至少两位的正整数的个位数字去掉,再从余下的数中减去个位数的5倍.当且仅当差是17的倍数时,原数也是17的倍数 . 例如,34是17的倍数,因为3-20=-17是17的倍数:20 ...

  4. Java中this,static,super及finalkeyword和代码块

    this: 能够使用this表示类中的属性------this.name=name 能够使用this强调调用的是本类的方法 能够使用this调用本类的构造方法------this();调用本类中无參构 ...

  5. OpenJudge 2980 大整数乘法

    链接地址:http://bailian.openjudge.cn/practice/2980/ 题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 求两个不超过200位的非负整数的积 ...

  6. iOS绘图教程 (转,拷贝以记录)

    本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,在翻译过程中我加入了一些书中没有涉及到的内容.希望本文能够对你有所帮助. 转自:http://www ...

  7. word2vec配置到使用

    (1)首先下载word2vec,地址:https://code.google.com/p/word2vec/,可能下载的时候有问题,google上不去,那么可以从csdn上面下载. 解压后目录如下: ...

  8. [转]使用sklearn进行集成学习——实践

    转:http://www.cnblogs.com/jasonfreak/p/5720137.html 目录 1 Random Forest和Gradient Tree Boosting参数详解2 如何 ...

  9. Java构造器与构建器的使用

    我们在平常类的构建过程中,可能会面临很多问题,可扩张性.安全性等等.想象一下,这样一个场景,我们现在要创建一个类,其中有6个属性,其中又有4个属性的值是不太确定的(可能某个对象就不需要其中的某个值), ...

  10. [GO]多任务的资源竞争问题

    package main import ( "fmt" "time" ) func Printer(s string) { for _, data := ran ...