阻止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后,可能也会 ...
随机推荐
- IDEA引MAVEN项目jar包依赖导入问题解决
Intellj 自动载入Mave依赖的功能很好用,但有时候会碰到问题,导致pom文件修改却没有触发自动重新载入的动作,此时需要手动强制更新依赖. 如下: 1手动删除Project Settings里面 ...
- 【NOIP模拟】cut
Description F大爷热爱切树.今天他找到一棵黑白树,不到两秒钟,F大爷就把这棵树切掉了.已知原先树上共n个点,每个点都是黑点或者白点,F大爷切去若干条边后,分成的若干个连通子树中每块恰有一个 ...
- Java I/O---概述
对于程序设计者来说,创建一个好的输入/输出系统(I/O)系统是一项艰难的任务. 现在大量不同方案已经说明了这一点.挑战似乎来自于要涵盖所有的可能性.不仅存在各种I/O源端和想要与之通信的接收端(文件. ...
- 西门子flexable创建画面
一.wincc flexable 创建画面包括以下四点 二.具体操作 1.组态画面模板 1)使用该模板的画面包括该模板的所有组件,一个模板也是一个画面 2)给模板上添加一个文本域如下图,则画面1也会显 ...
- android中Log类的封装
1.为了方便的使用Log打印日志,以及后续方便撤销日志打印,所以对Log类进行封装是一件好事. package market.phone; import android.util.Log; /** * ...
- Xamarin Android Fragment的两种加载方式
android Fragment的重点: 3.0版本后引入,即minSdk要大于11 Fragment需要嵌套在Activity中使用,当然也可以嵌套到另外一个Fragment中,但这个被嵌套的Fra ...
- 基于 HTML5 WebGL 的 3D 场景中的灯光效果
构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观又代表性很强,所以拿出来给大家分享一下. 本例地址:http://www. ...
- MySQL 单实例编译安装 以及多实例安装简介
这是基本的安装教程,与牛逼的大神无关,或许是牛逼大神不用看就会安装吧. CentOS 6.5 Final x86_64 一.预安装软件包 1.开发包组合安装 yum groupinstall &qu ...
- Nginx学习之配置RTMP模块搭建推流服务
写在开始 小程序升级实时音视频录制及播放能力,开放 Wi-Fi.NFC(HCE) 等硬件连接功能.同时提供按需加载.自定义组件和更多访问层级等新特性,增强了第三方平台的能力,以满足日趋丰富的业务需求. ...
- iOS中的armv7,armv7s,arm64,i386,x86_64
前言 一般iOS中的armv7.armv7s.arm64.i386.x86_64这些都代表了什么?在Xcode中如何选择? 介绍 armv7.armv7s.arm64都是ARM处理器的指令集. i38 ...