阻止a链接跳转方法总结
总结下a标签阻止默认行为的几种简单方法
(1)
<a href="javascript:void(0);" > 点我 </a>
onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。
<a href="javascript:;" > 点我 </a>
和void(0)一样,都返回"undefined"
(2)
<a href="#"> 点我 </a>
是网上很常见的代码,#是标签内置的一个方法,用这种方法点击后网页后返回到页面的最顶端所以又有了“##”“#!”等,尽管解决了返回顶部的问题但仍存在其他缺陷
(3)事件处理函数的工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后,
如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接呗点击了,同样的若返回false即会认为链接
未被点击
<a href="http://www.baidu.com" onclick=" myjs(); return false; "> 点我 </a>
<a href="http://www.baidu.com" onclick=" return false; "> 点我 </a>
当点击a标签时,JavaScript代码返回值为false,故此链接默认行为未被触发。
(4)preventDefault()阻止事件的默认行为但不支持IE,所以在IE中使用returnValue阻止事件默认行为
<a href="http://www.baidu.com" id="test"> 点我 </a>
<script type="text/javascript">
var test = document.getElementById('test');
function stopDefault( e )
{
if ( e && e.preventDefault )
e.preventDefault();
else
window.event.returnValue = false;
}
test.onclick = function(e)
{
stopDefault(e);
}
</script>
阻止a链接跳转方法总结的更多相关文章
- 阻止a链接跳转的点击事件
<a href="http://www.baidu.com" id="btn">按钮</a> <script> docume ...
- JS阻止链接跳转代码
刷新后focus在第一个标签 onload="$('#input_email').focus(); " $(document).ready(function(){ $(" ...
- 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...
- 关于锚点页内链接跳转出现问题(不响应,没有反应)的解决方法(ZT)
我们知道,利用锚点可以实现页面链接跳转,也可以实现同一页面内的跳转功能. 例如:<a href="somepage.htm>某页面链接</a> 可以跳转链接到som ...
- android/IOS各平台分享链接/跳转链接配置说明(备用)
Android: [Java] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 微信/朋友圈 //设置 ...
- iframe中的各种跳转方法
iframe中的各种跳转方法(转) 一.背景A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,在D中跳转页面的写法区别如下. 二.JS跳转window.l ...
- php开发中的页面跳转方法总结
PHP页面跳转实现的功能就是将网站中一个网页跳转到另一个网页中.对于刚刚学习PHP语言的朋友来说,是必须要掌握的基础方法. 页面跳转可能是由于用户单击链接.按钮等触发的,也可能是系统自动产生的.页面自 ...
- 阻止a标签跳转四种方法 兼容各大浏览器(包括IE)
阻止a标签跳转四种方法 兼容各大浏览器(包括IE) HTML <!--第一种--> <a href="javascript:;">我不会被跳转</a& ...
- C#中页面之间跳转方法比较
一直以来,各种跳转方法混用,浑浑噩噩没有仔细去了解过每个跳转方法的区别 1.<a herf="default.asp"></a> 超链接跳转 2.< ...
随机推荐
- C++学习笔记52:查找
//函数查找 template <class T> int seqSearch(const T list[], int n, const T &key) { ; i < n; ...
- yii2过滤器(filter)
一.VerbFilter VerbFilter检查请求动作的HTTP请求方式是否允许执行, 如果不允许,会抛出HTTP 异常 use yii\filters\VerbFilter; public fu ...
- 3ds max学习笔记(十)-- 实例操作(镜像和对齐)
1,镜像 选择物体对象然后点击: 偏移:新对象距离轴心所在的直线的距离: 2.对齐 栗子: 选择小球,点击[对齐];鼠标放置在图种位置,点击鼠标左键 出现弹框 调整位置: 先选择对齐位置-->当 ...
- PhantomJS、CasperJS安装配置图文详解
目前网站主流的加载方式: 一种是同步加载:另一种是异步加载,也即我们常说的用ajax.对于同步加载的网站,普通的爬虫程序轻松就能搞定.但是对于那种异步请求数据的网站,通常使用selenium+Phan ...
- db2 runstats和reorg
当数据库里某张表上有大量插入操作时,需要在表上做 RUNSTATS 命令保证数据库掌握准确的统计信息. 当数据库里某张表中的记录变化很大时(大量插入.删除.更新操作),需要在表上做 REORG 和 R ...
- Schaepher 博客目录
update: 2017-03-16 福州大学2015年秋软件工程实践课 软工课程作业目录 软工实践课程总结 团队博客 软件案例分析优秀链接汇总 Android Android学习笔记: (一):th ...
- 解决Spring Boot OTS parsing error: Failed to convert WOFF 2.0
<build> <resources> <resource> <directory>${project.basedir}/src/main/resour ...
- 转: ffmpeg循环推流方法
from: https://blog.csdn.net/weiyuefei/article/details/64125208 ffmpeg循环推流方法 You should be able to u ...
- Web Workers 简介
web worker 介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers web ...
- centos7.0安装cuda驱动
00.CUDA简介 CUDA和GPU的并行处理能力来加速深度学习和其他计算密集型应用程序 01.CPU+GPU协同架构 02.部署环境 [docker@lab-250 ~]$ cat /etc/*re ...