zoukankan      html  css  js  c++  java
  • JavaScript系列之事件冒泡机制简介

    JavaScript系列之事件冒泡机制

    DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。

    听了简介介绍之后,您可能不理解,所以举个例子:

    <html>
    <head>
    <title>js事件冒泡测试</title>
    </head>
    <body>
    <div id='content' onclick='alert("content")'>
    <div id='div' onclick='alert("div");'>
    <ul onclick='alert("ul");'>
    <li onclick='alert("li");'>test</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    

    点击test页签,会依次执行li的onclick、ul的onclick、div的onclick,content的onclick,从内到外执行,所以这个就是冒泡事件的简单例子

    最近也遇到了这种情况,所以就去网上搜索资料,简单学习一下,就是点击一个按钮的时候,竟然触发了两次,通过排查,发现了冒泡机制导致的,解决方法是禁用事件冒泡机制

    w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

    $(element).click(function(e){
       e.stopPropagation();//ie e.cancelBubble = true
    });
    

    当然除了冒泡机制会导致onclick被调用两次外,事件被绑定2次的情况也有可能,解决方法是解除事件,然后再绑定

    $(element).unbind('click').click(function() {
            // todo    
    })
    

    参考资料:
    JavaScript 详说事件机制之冒泡、捕获、传播、委托:https://www.cnblogs.com/bfgis/p/5460191.html

  • 相关阅读:
    关于ios6.0和5.0的横竖屏支持方法
    windows环境下搭建vue+webpack的开发环境
    诗歌类网址
    【第1阶段—GIS网址清单】其它杂项
    android内存指标
    Rownum与Order by
    使用反射复制一个JavaBean的对象
    catalog
    oralce中rownum理解
    BlockingQueue
  • 原文地址:https://www.cnblogs.com/mzq123/p/12182149.html
Copyright © 2011-2022 走看看