阻止a标签默认行为的几种简单方法
2016-04-16 09:59
267 查看
以下简单总结以下a标签阻止默认行为的几种简单方法,希望可以对有需要的朋友有些帮助,
(1) <a href="javascript:void(0);" onclick= "myjs( )"> Click Me </a>
onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。
<a href="javascript:;" > Click Me </a>
和void(0)一样,都返回"undefined"
(2) <a href="#"> Click Me </a>
是网上很常见的代码,#是标签内置的一个方法,用这种方法点击后网页后返回到页面的最顶端所以又有了“##”“#!”等,尽管解决了返回顶部的问题但仍存在其他缺陷
(3)事件处理函数的工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后,
如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接呗点击了,同样的若返回false即会认为链接
未被点击
<a href="http://www.baidu.com" onclick=" myjs(); return false; "> Click Me </a>
<a href="http://www.baidu.com" onclick=" return false; "> Click Me </a>
当点击a标签时,JavaScript代码返回值为false,故此链接默认行为未被触发。
(4)preventDefault()阻止事件的默认行为但不支持IE,所以在IE中使用returnValue阻止事件默认行为
<a href="http://www.baidu.com" id="test"> Click Me </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>
(1) <a href="javascript:void(0);" onclick= "myjs( )"> Click Me </a>
onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。
<a href="javascript:;" > Click Me </a>
和void(0)一样,都返回"undefined"
(2) <a href="#"> Click Me </a>
是网上很常见的代码,#是标签内置的一个方法,用这种方法点击后网页后返回到页面的最顶端所以又有了“##”“#!”等,尽管解决了返回顶部的问题但仍存在其他缺陷
(3)事件处理函数的工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后,
如果相应JavaScript代码返回true,onclick事件处理函数就会认为这个链接呗点击了,同样的若返回false即会认为链接
未被点击
<a href="http://www.baidu.com" onclick=" myjs(); return false; "> Click Me </a>
<a href="http://www.baidu.com" onclick=" return false; "> Click Me </a>
当点击a标签时,JavaScript代码返回值为false,故此链接默认行为未被触发。
(4)preventDefault()阻止事件的默认行为但不支持IE,所以在IE中使用returnValue阻止事件默认行为
<a href="http://www.baidu.com" id="test"> Click Me </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>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享