阻止a链接跳转方法总结
来源:互联网 发布:淘宝网团购 编辑:程序博客网 时间:2024/06/10 17:39
有时我们会遇到这种需要在a标签上添加click事件,并且跳转前处理一些事务,因此需要做一些处理,看很多人会这样写
<a href="#">link</a>,
但是发现点击后页面返回了顶部,所以又出现了这样的写法等
<a href="###">link</a>
但这样并不兼容所有浏览器,有些浏览器就会出现很怪异的形为。
因此,这个问题还需要其它方法来解决。
方法一
<a href="javascript:void(0)">百度</a>
void是一个操作符,void(0)返回undefined,地址不发生跳转
<a href="javascript:;">百度</a>
和以上相同,返回undefined
方法二 用return false
<a href="http://baidu.com" onclick="show()">百度</a> <script> function show(){ alert("我没跳转"); return false; }</script>
执行完以上代码你会深刻领悟到js 的坑。
首先你要知道 当 onclick 后面的事件不是一个函数名时,它会被包裹到一个匿名函数中执行。
以上就相当于是
obj.onclick=function(){ show();}
当点击链接的时候执行 onclick 里面的代码,而不是把show()当作事件处理程序,
return false 只是在 show() 这个函数中返回了并没有在 onclick 事件中返回。
因此还会发生跳转。重点在这里:在事件处理函数的工作机制中,当在给某元素添加事件处理函数后,一旦事件发生,相应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>
方法三 阻止默认事件 preventDefault()
但是preventDefault()阻止事件的默认行为不支持IE,所以在IE中要使用returnValue来阻止事件默认行为
(1)
<a href="http://www.baidu.com" id="test" onclick="stop()">百度</a>
function stop(event){ //IE和Chrome下是window.event 火狐下是event event = event || window.event; if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } //target才是点击的元素 IE和谷歌下是srcElement 火狐下是target var target = event.target || event.srcElement; //获取元素内部元素 alert(target.innerHTML); };
(2)
<a href="http://www.baidu.com" id="test"> 百度 </a>
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); }
阅读全文
0 0
- 阻止a链接跳转方法总结
- 阻止点击<a>标签链接跳转
- jquery阻止链接跳转
- 阻止a链接href跳转的两种方式
- 阻止a 标签跳转
- js中阻止a标签的跳转方法
- 点击a标签阻止页面跳转的两种方法
- 阻止默认行为:比如a链接的跳转。阻止冒泡:子元素的事件触发到了父元素身上
- a标签链接跳转
- a链接跳转方式
- 阻止a标签herf属性跳转
- 阻止a标签点击跳转刷新
- 阻止a标签跳转的默认行为
- 阻止a标签绑定click时,的默认跳转的方法
- js如何先阻止<a></a>的跳转?
- javascript 阻止a的link向href跳转
- iframe 父页面a标签链接跳转子页面锚点方法
- 关于阻止页面跳转至顶部的方法
- numpy入门——数据分割
- python基础
- codeforces 837 C
- Git使用教程之本地仓库的基本操作
- 限时抢购秒杀系统架构分析与实战
- 阻止a链接跳转方法总结
- response.setContentType与 request.setCharacterEncoding 区别
- UVA 156
- 利用setMouseCallback函数实现鼠标对图片窗口的操作!
- phpcms v9 去掉编辑器上传图片的宽高样式
- 配置opencv和VS2013
- linux下的kafka和zookeeper的使用配置
- HDU 5842Lweb and String
- 项目笔记随手记