阻止a标签的默认事件及延伸
先贴一段代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com" ><div id="a" onclick="fc1()">我是带阻止默认事件的a链接</div></a>
<a href="javascript:;" ><div id="b" onclick="fc2()">我是不带阻止默认事件的a链接</div></a>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
</body>
<script>
function fc1(e) {
alert('我是事件fc1')
console.log(window.event.returnValue)
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}
function fc2(e) {
alert('我是事件fc2')
}
function fc3(e){
document.getElementById("demo").innerHTML="Hello World";
}
</script>
</html>
默认操作 具体指的是什么呢？看如下实例：
(1)把单击事件处理程序注册到一个锚元素，而不是一个外层的<div>上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。
(2)当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。
这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。
如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也无济于事，因为默认操作不是在正常的事件传播流中发生的。
在这种情况下，处理方法有：
1、w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。
<a href="http://www.cnblogs.com/yycode/" id="testA" >caibaojian.com</a>
1 var a = document.getElementById("testA");
2 a.onclick =function(e){
3 if(e.preventDefault){
4 e.preventDefault();//
5 }else{
6 window.event.returnValue = false;//IE
7 //注意：这个地方是无法用return false代替的
8 //return false只能取消元素
9 }
10 }
2、return false;
javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。
//原生js，只会阻止默认行为，不会停止冒泡
var a = document.getElementById("testA");
a.onclick = function(){
return false;//当然 也阻止了事件本身
};
//既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。
//仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
1 //jQuery，既阻止默认行为又停止冒泡
2 $("#testA").on('click',function(){
3 return false;//当然 也阻止了事件本身
4 });
总结使用方法
当需要停止冒泡行为时，可以使用：
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation ){
e.stopPropagation(); //因此它支持W3C的stopPropagation()方法
}else{
window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
}
}
当需要阻止默认行为时，可以使用：
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //阻止默认浏览器动作(W3C)
}else {
window.event.returnValue = false; //IE中阻止函数器默认动作的方式
//注意：这个地方是无法用return false代替的
//return false只能取消元素
}
return false;
}
阻止a标签的默认事件及延伸的更多相关文章
- javascript总结35:DOM之给a注册点击事件, 阻止a标签的默认行为
给a注册点击事件时,有默认行为,阻止默认行为的方式: retrun false <!DOCTYPE html> <html lang="zh-CN"> &l ...
- JS阻止冒泡和取消默认事件(默认行为)
本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...
- 解决IE6下a标签的onclick事件里的超链接不跳转问题
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- js阻止元素的默认事件与冒泡事件
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault(); -- 阻止元素的默认 ...
- javascript -- 阻止默认事件 阻止事件冒泡
1. event.preventDefault(); -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- jQuery阻止冒泡和HTML默认操作
1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...
- 解决MUI阻止a标签默认跳转事件—方法总结
用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...
随机推荐
- [CSS]第一项和最后一项样式
列表项的第一项距离顶部0.2rem,最后一项距离底部0.5rem .item:first-child { padding-top: .2rem; } .item:last-child { paddin ...
- Sphinx学习笔记2
因为网站搜索的需要,启动了一个搜索引擎项目,其实也算不上完整的搜索引擎,需求很简单,如下: 1)搜索产品名.类别名.品牌名.副标题.关键字等字段 2)数据量目前为13000左右,未来可 ...
- JavaScript中函数function fun(){}和 var fun=function(){}的区别
function fun(){} 和 var fun=function(){}的区别 标题有点长···· 废话少说,其实他们的主要区别就是"函数声明的提前行为". var fun= ...
- 贪心算法——Fence Repair(POJ 3253)
题目描述 农夫约翰为了修理栅栏,要将一块很长的木板切割成N块.准备切成的木板长度为L1,L2,L3--LN,未切割前木板的长度恰好为切割后木板长度的总和.每次切断木板时,需要的开销为这块木板的长度.请 ...
- lesson - 12 Linux系统日常管理1
监控系统状态 – w, vmstat命令w, uptimesystem load averages 单位时间段内活动的进程数 查看cpu的个数和核数vmstat 1vmstat 1 10vmstat各 ...
- 冒烟测试与BVT测试
冒烟测试,它和回归测试的性质一样--只是一个测试活动,并不是一个测试阶段.冒烟测试贯穿于测试的任何一个阶段,单元测试.集成测试.系统测试里都有冒烟测试. 冒烟测试和其他所有的测试活动的目的不一样,它不 ...
- 移动端的一些常用meta标签
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...
- 例子：js超级玛丽小游戏
韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...
- 使用Template格式化Python字符串
对Python字符串,除了比较老旧的%,以及用来替换掉%的format,及在python 3.6中加入的f这三种格式化方法以外,还有可以使用Template对象来进行格式化. from string ...
- 浏览器根对象window之screen
1. screen 1.1 availHeight/Width screen.availWidth返回浏览器窗口可占用的水平宽度(单位:像素). screen.availHeight返回浏览器窗口在屏 ...