概要目标:由于自己在进行项目开发的时候遇到了需要点击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页面就做好了。
撒花~~~