嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响。

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);

  OK!!!了

js阻止元素的默认事件与冒泡事件的更多相关文章

  1. js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器) 转

    1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...

  2. js 阻止元素发生默认的行为ie兼容

    //亲测ie9可以兼容 function Go(event) { var e = event; if (e && e.preventDefault) { e.preventDefaul ...

  3. jq中阻止元素的默认行为

    event.preventDefault();//阻止元素的默认行为

  4. js的捕捉事件,冒泡事件

    冒泡事件可以查询上个随笔, 捕捉事件正好和冒泡时间正反着 所以这代码我把冒泡事件注释, html和css的内容 <style type="text/css"> #box ...

  5. 让A超链接无效的办法 阻止元素发生默认的行为

    $("a").click(function(event){ event.preventDefault(); }); event.preventDefault(); 方法阻止元素发生 ...

  6. Dom捕捉事件和冒泡事件-原理与demo测试

    先参考一下百度百科对冒泡事件流的解释: ----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了! http://baike.baidu.com/link?url=kaeJHT ...

  7. WPF的路由事件、冒泡事件、隧道事件(预览事件)

    本文摘要: 1:什么是路由事件: 2:中断事件路由: 3:自定义路由事件: 4:为什么需要自定义路由事件: 5:什么是冒泡事件和预览事件(隧道事件): 1:什么是路由事件 WPF中的事件为路由事件,所 ...

  8. WPF中的事件及冒泡事件和隧道事件(预览事件)的区别

    WPF快速指导10:WPF中的事件及冒泡事件和隧道事件(预览事件)的区别   WPF快速指导10:WPF中的事件及冒泡事件和隧道事件(预览事件)的区别 本文摘要: 1:什么是路由事件: 2:中断事件路 ...

  9. WPF中的事件及冒泡事件和隧道事件的区别

    WPF中的事件及冒泡事件和隧道事件的区别 冒泡事件表示事件从元素树向上到达根元素.这样您就可以在源元素的上方层级对象处理事件.例如,您可向嵌入的 Grid 元素附加一个 Button.Click 处理 ...

随机推荐

  1. iOS开发之MD5封装及应用

    一.MD5的封装 #define CC_MD5_DIGEST_LENGTH 16 - (NSString *)toMD5 { const char* input = [self UTF8String] ...

  2. 使用PULL方式解析XML资源文件下面的xml文件

    public class MainActivity extends Activity { private Button btn = null; private List<Map<Strin ...

  3. VS代码生成工具ReSharper使用手册:配置快捷键

    原文 http://www.cnblogs.com/PHPIDE/archive/2013/05/16/3081783.html VS代码生成工具ReSharper提供了丰富的快捷键,可以极大地提高你 ...

  4. java设计模式--结构型模式--享元模式

    享元模式 概述 运用共享技术有效地支持大量细粒度的对象. 适用性 当都具备下列情况时,使用Flyweight模式: 1.一个应用程序使用了大量的对象. 2.完全由于使用大量的对象,造成很大的存储开销. ...

  5. Buffer lock

    buffer lock    Oracle 提供非常精确,有效的Row Level Lock机制,多个用户同时修改数据时,为了保护数据. 以块为单位挂起锁的情况不会发生,但这不太正确. 以块为单位的锁 ...

  6. Asp.net MVC中的ViewData与ViewBag(转)

    在Asp.net MVC 3 web应用程序中,我们会用到ViewData与ViewBag,对比一下: ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从 ...

  7. Linux文件系统挂载管理

    http://itercast.com/lecture/19 文件系统创建好之后需要挂载到系统中方可使用,windows.Mac系统会自动挂载文件系统,而Linux下一般需要手工挂载或配置系统进行自动 ...

  8. UESTC_敢说就敢做 CDOJ 631

    敢说就敢做 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit Sta ...

  9. 4Sum 解答

    Question Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c  ...

  10. 关于qt学习的一点小记录(1)

    今日为了应付学校作业要求 决定现学qt来制作界面 毕竟c++不像在这方面c#可以那么方便 qt主要依靠信号.槽来实现类似winform中的消息 鉴于要尽快做完,故而没有细看qt 只是大概了解了下界面的 ...