美文网首页
移动端点击别的区域隐藏,兼容ios

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

作者: 聂嘚吧嘚 | 来源:发表于2019-01-07 16:04 被阅读0次

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

     $(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

          本文链接:https://www.haomeiwen.com/subject/ygburqtx.html