成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

chavesgu / 2876人閱讀

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

寫(xiě)手機(jī)側(cè)滑的時(shí)候 電腦及 Android 手機(jī)都沒(méi)毛病
唯獨(dú) iPhone 沒(méi)有效果 懷疑是 iPhone 自己的問(wèn)題
一百度還真是【捂臉】

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104821.html

相關(guān)文章

  • 又被事件冒泡坑了一把，這次要徹底弄懂瀏覽器的事件流

    摘要：事件冒泡一個(gè)簡(jiǎn)單，但是坑了我無(wú)數(shù)回的知識(shí)點(diǎn)與的交互通過(guò)事件來(lái)實(shí)現(xiàn)。而瀏覽器的事件流是一個(gè)非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭(zhēng)議，只需要知道在中規(guī)定的事件流包括了三個(gè)部分，事件捕獲階段處于目標(biāo)階段事件冒泡階段。 打算封裝一個(gè)彈窗組件，做的時(shí)候忘記了考慮事件冒泡的因素，結(jié)果被坑得不要不要的。為了解決自己的問(wèn)題，去查閱了不少資料，把事件流相關(guān)的知識(shí)都給總結(jié)一下。 ...

    Ocean 評(píng)論0 收藏0

  • 又被事件冒泡坑了一把，這次要徹底弄懂瀏覽器的事件流

    摘要：事件冒泡一個(gè)簡(jiǎn)單，但是坑了我無(wú)數(shù)回的知識(shí)點(diǎn)與的交互通過(guò)事件來(lái)實(shí)現(xiàn)。而瀏覽器的事件流是一個(gè)非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭(zhēng)議，只需要知道在中規(guī)定的事件流包括了三個(gè)部分，事件捕獲階段處于目標(biāo)階段事件冒泡階段。 打算封裝一個(gè)彈窗組件，做的時(shí)候忘記了考慮事件冒泡的因素，結(jié)果被坑得不要不要的。為了解決自己的問(wèn)題，去查閱了不少資料，把事件流相關(guān)的知識(shí)都給總結(jié)一下。 ...

    TIGERB 評(píng)論0 收藏0

  • 從入門(mén)到上線(xiàn)一個(gè)天氣小程序

    摘要：天氣預(yù)報(bào)小程序說(shuō)了很多小程序開(kāi)發(fā)的基礎(chǔ)準(zhǔn)備，下面就結(jié)合個(gè)人實(shí)際練手項(xiàng)目天氣預(yù)報(bào)小程序簡(jiǎn)單說(shuō)明。物料準(zhǔn)備從需求結(jié)果導(dǎo)向，天氣程序首先要能獲取到當(dāng)前所在地天氣狀況，再次可以自由選擇某地，知道其天氣狀況。 前言 學(xué)習(xí)了一段時(shí)間小程序，大致過(guò)了兩遍開(kāi)發(fā)文檔，抽空做個(gè)自己的天氣預(yù)報(bào)小程序，全當(dāng)是練手，在這記錄下。小程序開(kāi)發(fā)的安裝、注冊(cè)和接入等流程就不羅列了，在小程序接入指南已經(jīng)寫(xiě)得很清楚了，以下...

    Anshiii 評(píng)論0 收藏0

  • js面試題

    摘要：面試題的基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型基本數(shù)據(jù)類(lèi)型引用數(shù)據(jù)類(lèi)型和有何區(qū)別表示一個(gè)對(duì)象被定義了，值為空值表示不存在這個(gè)值。 js面試題 JS的基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型 基本數(shù)據(jù)類(lèi)型：undefined、null、boolean、number、string、symbol引用數(shù)據(jù)類(lèi)型：object、array、function null 和 undefined 有何區(qū)別？ null 表示一個(gè)對(duì)...

    Baoyuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<