【坑】冒泡事件不生效 --- iPhone處理冒泡事件的規(guī)則

chavesgu 發(fā)布于2019-08-23 18:12 / 2868人閱讀

摘要：寫手機側(cè)滑的時候電腦及手機都沒毛病唯獨沒有效果懷疑是自己的問題一百度還真是捂臉處理冒泡事件的規(guī)則點擊某個元素如果這個元素上沒有處理該事件，則繼續(xù)向上冒泡，直到下的子節(jié)點為止。

寫手機側(cè)滑的時候電腦及 Android 手機都沒毛病
唯獨 iPhone 沒有效果懷疑是 iPhone 自己的問題
一百度還真是【捂臉】

iPhone處理冒泡事件的規(guī)則：

1.點擊某個元素；
2.如果這個元素上沒有處理該事件，則繼續(xù)向上冒泡，直到body下的子節(jié)點為止。如果此時還是沒有元素處理這個事件，則丟棄該事件，不再向上冒泡；
3.如果在這條冒泡鏈當中，有一個元素處理了該事件，則事件還會一直向上冒泡，直到 window 所以就需要在body的某個子節(jié)點添加一個空的事件處理函數(shù)

//解決代碼
$("body").children().click(function () { /*這里不要寫任何代碼*/} );

具體應(yīng)該怎么用呢
我用一個側(cè)滑的小例子舉例
看【重點】位置的就行

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

    });
    //側(cè)滑出來變半透明的底
    $(".sideslip-black").animate({opacity:0.5},100).delay(500).css("display","block");
    var tag = $("#sideBox");
    var flag = true;
    //【重點來嘍！ 】
    $("body").children().click(function () {/*這里不要寫任何代碼*/});
    //【重點結(jié)束！】
    // 點擊 sideBox 以外的區(qū)域 使其消失
    $(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;
        }
    });
   
});