移动端点击别的区域隐藏,兼容ios

点击按钮 出现下拉框,点击其他区域隐藏,刚开始是这样写的:

 $(document).bind('click',function(){
    $('#test').css('display','none');
  });

在ios不兼容,原因是在ios中document ,body没有click,所以没效果。
百度都推荐用touch事件,但是我不想用:
js:

/*阻止冒泡*/
function stopPropagation(e) {
    e = e || event;
    if (e.stopPropagation)
        e.stopPropagation();//停止冒泡  非ie
    else
        e.cancelBubble = true;//停止冒泡 ie
}
/*点击按钮,下拉区域显示或隐藏*/
function navIcon(e){
    $('.navBox').toggle(500);
    stopPropagation(e);
}
 /*点击别的地方下拉框消失*/
   /*app相当于body里面唯一的子元素*/
    document.getElementById("app").addEventListener('click',function (e) {
        var parent=$(e.target).parents('.navIcon');   //navIcon为按钮,触发下拉区域
        if(parent.length===0){
            console.log('不在弹层与按钮区');
            //操作此区域
            $('.navBox').hide(500);   //下拉框区域隐藏
       }else{
            console.log('按钮与弹层区')
        }
    });

在ios兼容 ,目前没有发现问题,欢迎前来讨论。

你可能感兴趣的:(移动端点击别的区域隐藏,兼容ios)