Jquery手机点击其他地方隐藏控件问题

因为不太懂mui的底部导航栏的操作，所以自己写了用很普通的方法实现手机底部导航栏，遇到了很多问题。比如：要实现点击底部菜单栏上某一个菜单，显示子菜单，然后点击手机空白处，隐藏菜单。

实现方法是：

//点击其他地方隐藏下拉菜单
document.onclick = function(){ 
         
     $("#defaultTab_submenu").hide(); 
    $("#wgmenu_submenu").hide();
    $("#zcmenu_submenu").hide();
 }; 

//点击菜单显示子菜单
document.getElementById('defaultTab').addEventListener('touchstart',function(event){    
    var e=window.event || event;
    if(e.stopPropagation){    
        e.stopPropagation();   
    }else{     
        e.cancelBubble = true;   
    }
    event.preventDefault();
    $("#defaultTab_submenu").show();
    $("#wgmenu_submenu").hide();
    $("#zcmenu_submenu").hide();
}, { passive: false });

1、使用了mui的底部导航栏的样式，所以直接设置click事件的话不起作用，可以使用tap代替，但是使用tap来触发点击事件的时候有些手机还是没有用，所以直接使用touchstart来作为触发子菜单显示的事件。因为touchstart会冒泡，所以添加了阻止冒泡代码event.preventDefault();

2、在整个界面添加了点击事件，所以在点击的时候需要event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。