zoukankan      html  css  js  c++  java
  • 冒泡、捕获

     1 var father = document.getElementById('father');
     2     var btn = document.getElementById('btn');
     3 
     4     btn.addEventListener('click', function (event) {
     5         // 阻止冒泡
     6         if(event && event.stopPropagation){ // w3c标准
     7             event.stopPropagation();
     8         }else{ // IE系列 IE 678
     9             event.cancelBubble = true;
    10         }
    11 
    12        alert('点击了按钮');
    13     });
    14 
    15     father.addEventListener('click', function (ev) {
    16         // 阻止冒泡
    17         if(event && event.stopPropagation){ // w3c标准
    18             event.stopPropagation();
    19         }else{ // IE系列 IE 678
    20             event.cancelBubble = true;
    21         }
    22 
    23         alert('点击了父标签');
    24     });
    25 
    26     document.addEventListener('click', function (ev) {
    27         alert('点击了文档');
    28     });
    29 
    30 //阻止冒泡的兼容
     1  /*
     2       element.addEventListener(event, function, useCapture)
     3       可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
     4 
     5     可能值:
     6     true - 事件句柄在捕获阶段执行   先触发父--子
     7     false- false- 默认。事件句柄在冒泡阶段执行   先触发  子--父
     8     */
     9 
    10     var father = document.getElementById('father');
    11     var btn = document.getElementById('btn');
    12 
    13     btn.addEventListener('click', function (event) {
    14         alert('点击了按钮');
    15     }, true);
    16 
    17     father.addEventListener('click', function (ev) {
    18         alert('点击了父标签');
    19     }, true);
    20 
    21     document.addEventListener('click', function (ev) {
    22         alert('点击了文档');
    23     }, true);

    捕获阶段不能阻止冒泡

  • 相关阅读:
    JDBC的PreparedStatement是什么?
    ArrayList、LinkedList、Vector 的区别。
    final finally finalize区别
    面向对象三大特性
    JDBC访问数据库的基本步骤是什么?
    报表中的地图怎么做?
    报表工具如何实现“点击查看原图”
    玩转报表排名之组内排名
    动态隐藏行
    OUT 了??还没玩转报表超链接
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11216671.html
Copyright © 2011-2022 走看看