Zepto.js阻止事件冒泡

最新推荐文章于 2024-11-23 22:43:45 发布

晓晓攻城师

最新推荐文章于 2024-11-23 22:43:45 发布

阅读量815

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： zepto.js事件冒泡 onclick阻止冒泡 zepto onclick

本文链接：https://blog.youkuaiyun.com/qq_26245325/article/details/81949325

js 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在使用zepto.js时遇到的点击事件冒泡问题，详细介绍了如何通过判断事件目标来避免子元素触发父元素的点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

    //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--------');
    });