阻止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后,可能也会 ...
随机推荐
- 「mysql优化专题」90%程序员面试都用得上的索引优化手册(5)
目录(技术文) 多关于索引,分为以下几点来讲解: 一.索引的概述(什么是索引,索引的优缺点) 二.索引的基本使用(创建索引) 三.索引的基本原理(面试重点) 四.索引的数据结构(B树,hash) 五. ...
- 从源码角度简单看StringBuilder和StringBuffer的异同
概述 StringBuilder和StringBuffer是两个容易混淆的概念,本文从源码入手,简单看二者的异同. 容易知道的是,这两者有一个是线程安全的,而且线程安全的那个效率低. java doc ...
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 小白的Python之路 day1 数据类型，数据运算
一.数据类型初识 1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4.(-5+4j ...
- Spring框架（三） JDBCTemplate，声明式事务，自动装载（注解）
JDBCTemplate 按照标准正常项目的结构 结构图: model层 dao层 实现 dao:(DateBase Access Object) 数据访问对象,dao层只用来访问数据库和模型层 s ...
- 【算法】论平衡二叉树（AVL）的正确种植方法
参考资料 <算法(java)> — — Robert Sedgewick, Kevin Wayne <数据结构> ...
- 一口一口吃掉Volley（四）
欢迎访问我的个人博客转发请注明出处:http://www.wensibo.top/2017/02/17/一口一口吃掉Volley(四)/ 非常感谢你能够坚持看到第四篇,同时这也是这个Volley系列教 ...
- jmeter通过org.sqlite.JDBC驱动连接db数据库
最近遇到个项目,默认业务库为内置db数据库,在性能脚本编辑过程中要通过正则表达式提取器(关联)获取对应的id号,通过该id号到db数据库中查找对应的数据源name字段内容,为下一个post请求做par ...
- 深入理解 Python 异步编程(上)
http://python.jobbole.com/88291/ 前言 很多朋友对异步编程都处于"听说很强大"的认知状态.鲜有在生产项目中使用它.而使用它的同学,则大多数都停留在知 ...
- 删除redis 失效节点
cluster forget命令 cluster forget nodeid