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自学第18天
    Java自学第二十三天
    2\8定律,大家都要加油
    C#学习之我见
    2020年8月4日Java学习日记
    2020年8月5日
    2020年8月6日Java学习日记
    2020年8月7日Java学习日记
    第七章:(1)Spring Boot启动原理
    第六章:(3)数据访问 之 整合MyBatis
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11216671.html
Copyright © 2011-2022 走看看