1. event.preventDefault();  -- 阻止元素的默认事件。
注:a元素的点击跳转的默认事件 ,

button,radio等表单元素的默认事件 ,

div 元素没有默认事件

例:

<a href="http://www.baidu.com" target="_black">百度</a>
var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);

解释:点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到百度了。

2. event.stopPropagation();  -- 阻止元素冒泡事件

注:嵌套元素一般都存在冒泡事件,会带来某些影响

例:

 
<div id="c1" onclick="alert(1)">
  <div id="c2" onlick="alert(2)">
    <input type="button" id="c3" value="点击" onclick="alert(3)">
  </div>
</div>

这里点击button的时候,浏览器会先后弹出3,2,1,本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件,这里我们只是做了一个简单测试,试想如果在项目开发中,某个按钮和他的父级同时绑定了很重要的事件,那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。

给input注册click事件,同时阻止它的冒泡事件

document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);

javascript -- 阻止默认事件 阻止事件冒泡的更多相关文章

  1. vue 事件修饰符(阻止默认行为和事件冒泡)

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  2. addevent兼容函数 && 阻止默认行为 && 阻止传播

    function addEvent(a, b, c, d) { a.addEventListener ? a.addEventListener(b, c, d) : a.attachEvent(&qu ...

  3. js事件冒泡、阻止事件冒泡以及阻止默认行为

    事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...

  4. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  5. js 事件详解 冒泡

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  6. jQuery事件篇---事件对象

    内容提纲: 1.事件对象 2.冒泡和默认行为 发文不易,转载请注明出处! JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器的兼容性,开发者总是会做兼容方 ...

  7. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  8. JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

  9. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  10. Javascript和jquery事件--阻止事件冒泡和阻止默认事件

    阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...

随机推荐

  1. TP框架中session操作

    TP中session操作 查看代码,OMG! 不应该是这样的

  2. Java之深入JVM(6) - 字节码执行引擎(转)

    本文为转载,来自 前面我们不止一次的提到,Java是一种跨平台的语言,为什么可以跨平台,因为我们编译的结果是中间代码—字节码,而不是机器码,那字节码在整个Java平台扮演着什么样的角色的呢?JDK1. ...

  3. 〖Linux〗proc的一些文件读取操作

    /* * ===================================================================================== * * Filen ...

  4. 〖Android〗/system/etc/recovery-resource.dat

    源代码中的解释:[platform_build/tools/releasetools/ota_from_target_files] # Recovery is generated as a patch ...

  5. Android异步下载

    概述 实现App常见下载公共 支持通知栏显示 支持 暂停.取消功能,使用Service.AsyncTask实现异步下载.特点简单.实用.方便源码扩展修改 详细 代码下载:http://www.demo ...

  6. Lintcode---将二叉树拆成链表

    将一棵二叉树按照前序遍历拆解成为一个假链表.所谓的假链表是说,用二叉树的 right 指针,来表示链表中的 next 指针. 注意事项 不要忘记将左儿子标记为 null,否则你可能会得到空间溢出或是时 ...

  7. 细说websocket - php篇(未完)

    下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket ...

  8. Atitit.故障排除系列---php 程序网站数据库错误排除流程

    Atitit.故障排除系列---php 程序网站数据库错误排除流程 Php页面报告的错误不能定位到myusql的db配置上...字说是db conn err Mysql 接入错误...大概查看哈能不能 ...

  9. ov5640 i2c通信异常问题

    1 异常场景如下描述 之前的测试场景: 将插在排针上的杜邦线向上拔一点,留出空间挂示波器的探针. 这种方式会导致i2c只发送一组8bit的数据,而另外两组没有发送成功.如上图所示. 因此,之前出现没有 ...

  10. 02、Unicode 汉字转码小工具

    在做 Windows app 的时候,与服务器端交互使用的是 json 格式的数据,里面的汉字内容被 编码成 unicode 格式,在调试的时候不太方便,就写了个工具,把里面的 unicode 内容转 ...