写手机侧滑的时候 电脑及 Android 手机都没毛病
惟独 iPhone 没有效果 怀疑是 iPhone 本身的问题
一百度还真是【捂脸】css
iPhone处理冒泡事件的规则:
1.点击某个元素;
2.若是这个元素上没有处理该事件,则继续向上冒泡,直到body下的子节点为止。若是此时仍是没有元素处理这个事件,则丢弃该事件,再也不向上冒泡;
3.若是在这条冒泡链当中,有一个元素处理了该事件,则事件还会一直向上冒泡,直到 window 因此就须要在body的某个子节点添加一个空的事件处理函数ide
//解决代码 $("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; } }); });