html5的点击div外侧进行隐藏div的兼容手机

概要目标：由于自己在进行项目开发的时候遇到了需要点击div容器以外的地方进行关闭此div 特此进行记录。

1.首先需要进行 在网页的页面整体document的点击事件进行编写，需要判断是否是手机

     document.onclick = function () {
            // console.log(data.HostNav);
            if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
                var event = window.event || ev;
                hide(event, 'SendCRPingNav'); // 隐藏点击登陆
                hide(event, 'BanQuanNav'); // 隐藏点击找密
                hide(event, 'share_panorama'); // 隐藏点击留言 
            } else {
              
                var event = window.event || ev;
                hide(event, 'SendCRPingNav'); // 隐藏点击登陆
                hide(event, 'BanQuanNav'); // 隐藏点击找密
                hide(event, 'share_panorama'); // 隐藏点击留言 

            }
        }

2.进行隐藏代码的编写

主要含义是判断是不是指定div 不是的话，就进行jquery 淡出关闭

 function hide(evt, id) {
            var obj = document.getElementById(id);
            var target = evt.target ? evt.target : evt.srcElement;

            if (target.id == "nav" || target.id == "nav2")
                return;
            else
                //  obj.style.display = "none";
                $(obj).fadeOut();//关闭分享
        }

3.给页面的指定菜单按钮和要显示的容器以阻止冒泡行为

 //开始进行页面的手机事件
        window.onload = function () {
            //加上隐藏注册内层容器  菜单部分
            var SendCRRegistNav = document.getElementById("lr_nb");
            SendCRRegistNav.addEventListener("click", function (event) {
                event = event || window.event;
                event.stopPropagation();
            }); 
            /*touchstart*/
            var SendCRRegistNav = document.getElementById("lr_nb");
            SendCRRegistNav.addEventListener("touchstart", function (event) {
                event = event || window.event;
                event.stopPropagation();
            });
            var SendCRRegistNav = document.getElementById("SendCRPingNav");
            SendCRRegistNav.addEventListener("click", function (event) {
                event = event || window.event;
                event.stopPropagation();
            });
            /*touchstart*/
            var SendCRRegistNav = document.getElementById("SendCRPingNav");
            SendCRRegistNav.addEventListener("touchstart", function (event) {
                event = event || window.event;
                event.stopPropagation();
            });
            var SendCRRegistNav = document.getElementById("BanQuanNav");
            SendCRRegistNav.addEventListener("click", function (event) {
                event = event || window.event;
                event.stopPropagation();
            });
            /*touchstart*/
            var SendCRRegistNav = document.getElementById("BanQuanNav");
            SendCRRegistNav.addEventListener("touchstart", function (event) {
                event = event || window.event;
                event.stopPropagation();
            });
            var SendCRRegistNav = document.getElementById("share_panorama");
            SendCRRegistNav.addEventListener("click", function (event) {
                event = event || window.event;
                event.stopPropagation();
            });
            /*touchstart*/
            var SendCRRegistNav = document.getElementById("share_panorama");
            SendCRRegistNav.addEventListener("touchstart", function (event) {
                event = event || window.event;
                event.stopPropagation();
            });
        }

4.最后要给手机加上点击事件

        document.addEventListener('touchstart', function (event) {
            var event = event || window.event;




            switch (event.type) {
                case "touchstart":
                    // alert("Touch(touchstart当手指触摸屏幕时) started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")");
                    // var target=event.target?event.target:event.srcElement;
                    //  if(target.id=="SendCRRegistNav"||target.id=="SendCRLoginNav"||target.id=="SendCRZMNav"||target.id=="SendCRLiuNav"||target.id=="SendCRPingNav"){
                    //      return;
                    //  } else{
                    // hide(event, 'SendCRRegist'); //隐藏点击注册
                    hide(event, 'SendCRPingNav'); // 隐藏点击登陆
                    hide(event, 'BanQuanNav'); // 隐藏点击找密
                    hide(event, 'share_panorama'); // 隐藏点击留言 
                   

            }
        }, false);

 至此，兼容手机和电脑的点击div容器外侧关闭div的html5页面就做好了。

撒花~~~