zoukankan      html  css  js  c++  java
  • jQuery事件流的顺序

    <div id="aaron">
       <div id='test'>
            <ul>
                <p>点击p被委托,ul被阻止了,因为内部重写了事件对象</p>
            </ul>
       </div>
    </div>v>

    测试代码

    var aaron = $("#aaron")
    //同一个元素上绑定不同的事件委托
    aaron.on('mousedown','p',function(e){
        console.log('委托到p触发')
      // e.stopPropagation()
    })
    aaron.on('mousedown','ul',function(e){
        console.log('被阻止了')
    })
    
    aaron.on('mousedown',function(e){
      console.log('mousedown')
    })
    
    $("#test").on('mousedown',function(){
      console.log('test')
    })
    
    $("body").on('mousedown',function(){
      console.log('body')
    })

    触发的的结果:

    test
    委托到p触发
    被阻止了
    mousedown
    body

    根据W3C的事件流,捕获到目标到冒泡

    可以看到

    p,ul节点虽然比#test div节点更早接触到target但是由于p,ul是绑定在#aaron div上的冒泡,所以优先级要低于#test

    但是同一个元素的优先级,就要根据元素的嵌套顺序了。反正一句话离目标taget越近的越早触发

  • 相关阅读:
    cocos2d-x simpleGame 0
    cocos2d-x 下的HelloWorld
    cocos2d-x windows 配置
    算术入门之加减乘除
    计算摄氏温度
    输出倒三角图案
    厘米换算英尺英寸
    多文件模块的学生信息库系统
    GPS数据处理
    单词长度
  • 原文地址:https://www.cnblogs.com/aaronjs/p/4140090.html
Copyright © 2011-2022 走看看