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

    捕获阶段不能阻止冒泡

  • 相关阅读:
    【Java】XML文件的解析
    PE知识复习之PE合并节
    PE知识复习之PE的重定位表
    PE知识复习之PE的两种状态
    PE知识复习之PE的节表
    PE知识复习之PE的各种头属性解析
    PE知识复习之PE的导入表
    PE知识复习之PE的导出表
    PE知识复习之PE的绑定导入表
    第三讲扩展,VA,RVA,FA(RAW),模块地址的概念
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11216671.html
Copyright © 2011-2022 走看看