【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事件,即可解决。
【web】a标签点击时跳出确认框的更多相关文章
- a标签点击时跳出确认框
在做一些删除等的操作时,在跳转链接前,需要弹出一个确认框确认,避免误点. 方法一: <a href="http://www.baidu.com" onClick=" ...
- 去除input标签点击时的默认样式
去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框
- 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序
1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...
- 去除ios系统a标签点击时的灰色背景
使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景,想要去掉的话可以用下面这种方式 a,a:hover,a:active,a:visited,a:link,a:f ...
- 移动端去掉a标签点击时出现的背景
之前做移动端的Portal时,手机上测试,点击a标签总是出现一个背景框 在CSS中添加 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);就可以了 a:act ...
- Trick:如何去掉html标签点击时的蓝色边框
我们在用html标签时,如input.button.select,img标签时,点击标签经常出现一个蓝色的边框,这个边框真的很low,想要去掉怎么办 其实,css有样式可以设置一下,这个问题就轻松 ...
- html页面多个a标签点击时显示不同的样式
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 超链接 a 标签点击时,弹出提示框,可以按照如下来写
onclick="return confirm('确定删除该条记录?')" 加上这条记录后,就可以在访问href属性指向的链接时,有弹出提示
- 20160622001 GridView 删除列 用模板实现删除时提示确认框
GridView在使用CommandField删除时弹出提示框,在.net2005提供的GridView中我们可以直接添加一个 CommandField删除列:<asp:CommandField ...
随机推荐
- ASP入门(十五)- Global.asa
Global.asa 文件是一个可选文件,它可包含被 ASP 应用程序中每个页面访问的对象.变量和方法的声明.所有合法的浏览器脚本都可以在 Global.asa 中使用. Global.asa 文件只 ...
- [Canvas]计时表/秒表
欲观看效果请点击下载,然后用浏览器打开index.html查看. 本作 Github地址:https://github.com/horn19782016/StopWatch 图例: 代码: <! ...
- stl 迭代器失效
1.对于基于连续内存的容器,容器元素的增删,有可能会导致迭代器的失效.考虑: int main(int argc, char* argv[]) { vector<int> intVec; ...
- Android 开源项目 eoe 社区 Android 客户端
本文内容 环境 开源项目 eoe 社区 Android 客户端 本文介绍 eoe 社区 Android 客户端.它是一个开源项目,功能相对简单,采用侧边菜单栏.可以学习一下.点击此处查看 GitHub ...
- oracle 学习blogs
http://blog.sina.com.cn/s/blog_5dfbafd20100sxv7.html
- 关于LayoutInflater的错误用法(警告提示:Avoid passing null as the view root)
项目中用LayoutInflater加载xml布局一直飘黄警告,上网搜了搜发现没有解释明白的,到是找到了一篇外国的博文,但是竟然是英文...幸好以前上学时候的英语不是很差加上谷歌的辅助,简单翻一下! ...
- Spring MVC中使用errors标签
先创建一个实体类,后续的验证都基于这个实体类: public class Goods { private String goodsName; private String city; private ...
- 使用Chrome保存网页为mht文件
一直在使用chrome浏览器,但由于需要将部分网页保存为mht文件,却发现chrome默认不支持.chrome浏览器默认支持2种:单独的html文件,全部: 万能的chrome怎么可能保存不了mht? ...
- 利用RTMFP开发P2P应用
利用RTMFP开发P2P应用 flash10使用RTMFP 开发点对点P2P应用 通过Stratus 服务器在Flash Player中使用RTMFP 开发 点对点应用 Adobe Flash Pla ...
- jstat 使用日志
如何判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的top指令基本上满足不了这样的需求,因为它主要监控的是总体的系统资源,很难定位到java应用程序. Jstat是JDK自带的一个 ...