先贴一段代码

<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标签的默认事件及延伸的更多相关文章

  1. javascript总结35:DOM之给a注册点击事件, 阻止a标签的默认行为

    给a注册点击事件时,有默认行为,阻止默认行为的方式: retrun false <!DOCTYPE html> <html lang="zh-CN"> &l ...

  2. JS阻止冒泡和取消默认事件(默认行为)

    本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...

  3. 解决IE6下a标签的onclick事件里的超链接不跳转问题

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...

  4. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  5. js阻止元素的默认事件与冒泡事件

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault();  -- 阻止元素的默认 ...

  6. javascript -- 阻止默认事件 阻止事件冒泡

    1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: ...

  7. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  8. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

  9. 解决MUI阻止a标签默认跳转事件—方法总结

    用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...

随机推荐

  1. LBSN中的用户行为模式分析

    LBSN中的用户行为模式分析 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouw  2015-12-23   声明: 1)该LBSN的 ...

  2. CentOS6.9下安装rabbitmq消息队列

    安装如下步骤: 首先安装erlang yum install erlang 安装rabbitmq rpm包 wget http://www.rabbitmq.com/releases/rabbitmq ...

  3. Python进阶之迭代器和生成器

    可迭代对象 Python中任意的对象,只要它定义了可以返回一个迭代器的__iter__方法,或者定义了可以支持下标索引的__getitem__方法,那么它就是一个可迭代对象.简单来说,可迭代对象就是能 ...

  4. 用过的关于css的知识

    1.代码片段 让两个div并排起来显示. <div style="width:1000px; text-align:center;" id="content&quo ...

  5. spring boot入门 -- 介绍和第一个例子

    "越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...

  6. RabbitMQ之消费者Demo(队列参数详细说明)

    package com.jiefupay; import java.io.IOException; import java.util.HashMap; import java.util.Map; 8 ...

  7. FPGA浮点数定点化

    因为在普通的fpga芯片里面,寄存器只可以表示无符号型,不可以表示小数,所以在计算比较精确的数值时,就需要做一些处理,不过在altera在Arria 10 中增加了硬核浮点DSP模块,这样更加适合硬件 ...

  8. spring boot 遇到 supported setting property http://xml.org/sax/properties/lexical-handler

    解决链接:http://apache-fop.1065347.n5.nabble.com/org-xml-sax-SAXNotSupportedException-thrown-by-FOP-td11 ...

  9. c#常用快捷键

    VS快捷键大全(总结了一些记忆的口诀) 原文转载至   https://www.cnblogs.com/liyunhua/p/4537054.html#top  谢谢大牛的分享!     相信.Net ...

  10. 如何复制Google浏览器的控制台内容

    今天在调用第三方的接口,对着文档,传参数,老是报参数错误,没办法只能把参数打印出来看看,在Google控制台上看,费劲,就想复制出来,格式化一下,然后对着文档进行对比. console.info(JS ...