【坑】冒泡事件不生效 --- iPhone处理冒泡事件的规则

chavesgu 发布于2019-08-23 18:12 / 3056人阅读

摘要：写手机侧滑的时候电脑及手机都没毛病唯独没有效果怀疑是自己的问题一百度还真是捂脸处理冒泡事件的规则点击某个元素如果这个元素上没有处理该事件，则继续向上冒泡，直到下的子节点为止。

写手机侧滑的时候电脑及 Android 手机都没毛病
唯独 iPhone 没有效果怀疑是 iPhone 自己的问题
一百度还真是【捂脸】

iPhone处理冒泡事件的规则：

1.点击某个元素；
2.如果这个元素上没有处理该事件，则继续向上冒泡，直到body下的子节点为止。如果此时还是没有元素处理这个事件，则丢弃该事件，不再向上冒泡；
3.如果在这条冒泡链当中，有一个元素处理了该事件，则事件还会一直向上冒泡，直到 window 所以就需要在body的某个子节点添加一个空的事件处理函数

//解决代码
$("body").children().click(function () { /*这里不要写任何代码*/} );

具体应该怎么用呢
我用一个侧滑的小例子举例
看【重点】位置的就行

$("#ph-more").on("click",function (event) {
    event.stopPropagation();
    //侧滑出来的 box
    $("#sideBox").animate({right:"0px",opacity:1},1000,function(){

    });
    //侧滑出来变半透明的底
    $(".sideslip-black").animate({opacity:0.5},100).delay(500).css("display","block");
    var tag = $("#sideBox");
    var flag = true;
    //【重点来喽！ 】
    $("body").children().click(function () {/*这里不要写任何代码*/});
    //【重点结束！】
    // 点击 sideBox 以外的区域 使其消失
    $(document).bind("click",function(e){
        var target = $(e.target);
        if(target.closest(tag).length == 0 && flag == true){
            $(tag).animate({right:"-500px",opacity:0},1000);
            $(".sideslip-black").animate({opacity:0},100).delay(500).css("display","none");
            flag = false;
        }
    });
   
});

GPU云服务器云服务器冒泡事件事件冒泡事件冒泡机制阻止冒泡事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104821.html

又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流

摘要：事件冒泡一个简单，但是坑了我无数回的知识点与的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议，只需要知道在中规定的事件流包括了三个部分，事件捕获阶段处于目标阶段事件冒泡阶段。打算封装一个弹窗组件，做的时候忘记了考虑事件冒泡的因素，结果被坑得不要不要的。为了解决自己的问题，去查阅了不少资料，把事件流相关的知识都给总结一下。 ...

Ocean 2019-08-19 18:33 评论0 收藏0
又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流

摘要：事件冒泡一个简单，但是坑了我无数回的知识点与的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议，只需要知道在中规定的事件流包括了三个部分，事件捕获阶段处于目标阶段事件冒泡阶段。打算封装一个弹窗组件，做的时候忘记了考虑事件冒泡的因素，结果被坑得不要不要的。为了解决自己的问题，去查阅了不少资料，把事件流相关的知识都给总结一下。 ...

TIGERB 2019-08-01 15:22 评论0 收藏0
从入门到上线一个天气小程序

摘要：天气预报小程序说了很多小程序开发的基础准备，下面就结合个人实际练手项目天气预报小程序简单说明。物料准备从需求结果导向，天气程序首先要能获取到当前所在地天气状况，再次可以自由选择某地，知道其天气状况。前言学习了一段时间小程序，大致过了两遍开发文档，抽空做个自己的天气预报小程序，全当是练手，在这记录下。小程序开发的安装、注册和接入等流程就不罗列了，在小程序接入指南已经写得很清楚了，以下...

Anshiii 2019-08-23 14:05 评论0 收藏0
js面试题

摘要：面试题的基本数据类型和引用数据类型基本数据类型引用数据类型和有何区别表示一个对象被定义了，值为空值表示不存在这个值。 js面试题 JS的基本数据类型和引用数据类型基本数据类型：undefined、null、boolean、number、string、symbol引用数据类型：object、array、function null 和 undefined 有何区别？ null 表示一个对...

Baoyuan 2019-08-23 18:35 评论0 收藏0