共计 928 个字符,预计需要花费 3 分钟才能阅读完成。
写手机侧滑的时候 电脑及 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;
}
});
});
正文完
发表至: javascript
2019-06-18