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() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

巴特西

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

最新文章

热门文章