欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Zepto.js阻止事件冒泡

程序员文章站 2022-05-03 18:04:36
...

问题描述:

    //1. 层级关系
    //.jd_case -> .ico_code || .ico_computer
    $(document).on('click', '.ico_code', function(e){
        console.log('ico_code-------');
    });
    $(document).on('click', '.ico_computer', function(e){
        console.log('ico_computer-------');
    });
    $(document).on('tap', '.jd_case', function(e){
        console.log('jd_case--------');
    });

    //2. 处理 ico_code 和 ico_computer 的点击事件继续往上冒泡
    //----发现 return false 和 e.stopPropagation() 并没有起效果
    $(document).on('click', '.ico_code', function(e){
        console.log('ico_code-------');
        //return false;
        e.stopPropagation();
    });
    $(document).on('click', '.ico_computer', function(e){
        console.log('ico_computer-------');
        //return false;
        e.stopPropagation();
    });
    $(document).on('tap', '.jd_case', function(e){
        console.log('jd_case--------');
    });

原因:

//
//看到一篇文章说 可能是zepto的轻量的原因
//
//

解决:


    $(document).on('click', '.ico_code', function(e){
        console.log('ico_code-------');
    });
    $(document).on('click', '.ico_computer', function(e){
        console.log('ico_computer-------');
    });
    $(document).on('tap', '.jd_case', function(e){
        //判断来源
        if ($(e.target).hasClass('ico_computer') || $(e.target).hasClass('ico_code')) {
            return;
        }
        console.log('jd_case--------');
    });