阻止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后,可能也会 ...
随机推荐
- 这么说吧，java线程池的实现原理其实很简单
好处 : 线程是稀缺资源,如果被无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,合理的使用线程池对线程进行统一分配.调优和监控,有以下好处: 1.降低资源消耗: 2.提高响应速度: 3.提高线 ...
- 《编程语言实现模式》【PDF】下载
<编程语言实现模式> 编程语言实现模式旨在传授构建语言应用(工具)的经验和理念,教读者构建自己的语言应用.这里的语言应用并非特指用编译器或解释器实现编程语言,而是泛指任何处理.分析.翻译输 ...
- 9.python面向对象编程
面向对象的几个核心特性如下 Class 类一个类即是对一类拥有相同属性的对象的抽象.蓝图.原型.在类中定义了这些对象的都具备的属性(variables(data)).共同的方法 Object 对象 一 ...
- Java用代码获取classes目录下的文件的方式
假设我们有个Maven的Web项目,其中有src/main/java和src/main/resources两个输出目录(注意这两个目录下的内容运行后都会输出到classes目录下), 而在src/ma ...
- C++各种指针辨析
1)int *p p与*结合,表明p是一个指针 然后前面int说明p是一个整形的指针 2)int *p[n] 因为[]比*优先级高,所以p先与[]结合,表明p是个数组,然后这个数组在与*结合,说明数组 ...
- JSP和JavaBean总结
JSP JSP全名为Java Server Pages,即java服务器页面,其根本是一个简化的Servlet设计.它是在传统的网页HTML文件中插入Java代码,从而形成JSP文件. JSP注释分为 ...
- signalr中Group 分组群发消息的简单使用
前一段时间写了几篇关于signalr的文章 1.MVC中使用signalR入门教程 2.mvc中signalr实现一对一的聊天 3.Xamarin android中使用signalr实现即时通讯 在平 ...
- date 命令详解
date - print or set the system date and time Display the current time in the given FORMAT, or set th ...
- free 命令详解
作用:显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区 选项: -b 以byte为单位显示内存使用情况 -k 以kb 为单位显示内存使用情况 -m 以mb 为单位显示内存使用情 ...
- /sbin/nologin 和 /bin/false 的区别
/bin/false是最严格的禁止login选项,一切服务都不能用,而/sbin/nologin只是不允许系统login,可以使用其他ftp等服务 如果想要用false在禁止login的同时允许ftp ...