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越近的越早触发

  • 相关阅读:
    窗内的星星
    亚特兰蒂斯
    你能回答这些问题吗
    区间最大公约数
    集训队8月14日(树状数组)
    一个简单的整数问题2
    谜一样的牛
    楼兰图腾
    Eternal Victory
    集训队8月12日(并查集)
  • 原文地址:https://www.cnblogs.com/aaronjs/p/4140090.html
Copyright © 2011-2022 走看看