資訊專欄INFORMATION COLUMN
摘要：寫手機側滑的時候電腦及手機都沒毛病唯獨沒有效果懷疑是自己的問題一百度還真是捂臉處理冒泡事件的規則點擊某個元素如果這個元素上沒有處理該事件，則繼續向上冒泡，直到下的子節點為止。
寫手機側滑的時候 電腦及 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;
}
});
});
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104821.html
摘要：事件冒泡一個簡單，但是坑了我無數回的知識點與的交互通過事件來實現。而瀏覽器的事件流是一個非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規定的事件流包括了三個部分，事件捕獲階段處于目標階段事件冒泡階段。 打算封裝一個彈窗組件，做的時候忘記了考慮事件冒泡的因素，結果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關的知識都給總結一下。 ...
摘要：事件冒泡一個簡單，但是坑了我無數回的知識點與的交互通過事件來實現。而瀏覽器的事件流是一個非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規定的事件流包括了三個部分，事件捕獲階段處于目標階段事件冒泡階段。 打算封裝一個彈窗組件，做的時候忘記了考慮事件冒泡的因素，結果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關的知識都給總結一下。 ...
摘要：天氣預報小程序說了很多小程序開發的基礎準備，下面就結合個人實際練手項目天氣預報小程序簡單說明。物料準備從需求結果導向，天氣程序首先要能獲取到當前所在地天氣狀況，再次可以自由選擇某地，知道其天氣狀況。 前言 學習了一段時間小程序，大致過了兩遍開發文檔，抽空做個自己的天氣預報小程序，全當是練手，在這記錄下。小程序開發的安裝、注冊和接入等流程就不羅列了，在小程序接入指南已經寫得很清楚了，以下...
閱讀 712·2021-11-22 13:54
閱讀 3077·2021-09-26 10:16
閱讀 3505·2021-09-08 09:35
閱讀 1586·2019-08-30 15:55
閱讀 3436·2019-08-30 15:54
閱讀 2082·2019-08-30 10:57
閱讀 502·2019-08-29 16:25
閱讀 883·2019-08-29 16:15
