移动端document点击事件无效解决方法

2015-11-04阅读(1736)评论(0)

W3Cways.com 微信公众号

先看下面这段JS代码:

 $(function () {
        $('.icon-top').on('click', function (event) {
            //取消事件冒泡  
            event.stopPropagation();
            //按钮的toggle,如果.top-fnc是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。  
            $(this).next('.top-fnc').toggle();

            return false;
        });
        //点击空白处隐藏弹出层,下面为滑动消失效果和淡出消失效果。
        $(document).on('click', function (event) {
            var _con = $('.top-fnc'); // 设置目标区域
            if (!_con.is(event.target) && _con.has(event.target).length === 0) {
                $('.top-fnc').hide(); //淡出消失
            }
        });

    });

mobile-js-document
如图,我点击向下箭头,下面的内容.top-fnc就会显示出来,再点击,.top-fnc隐藏,.top-fnc出现的同时,点击空白部分,.top-fnc也会隐藏起来。上面这段代码在PC上没有任何问题,但是在移动端上,点击空白部分,.top-fnc就不会隐藏了。

解决方案:

把JS中document稍作修改如下:

 $(function () {
        $('.icon-top').on('click', function (event) {
            //取消事件冒泡  
            event.stopPropagation();
            //按钮的toggle,如果.top-fnc是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。  
            $(this).next('.top-fnc').toggle();

            return false;
        });
        //点击空白处隐藏弹出层,下面为滑动消失效果和淡出消失效果。
        $('div').parents().on('click', function (event) { //把document修改为div的所有父元素
            var _con = $('.top-fnc'); // 设置目标区域
            if (!_con.is(event.target) && _con.has(event.target).length === 0) {
                $('.top-fnc').hide(); //淡出消失
            }
        });

    });

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 移动端document点击事件无效解决方法

分享到:更多 ()

Web前端开发-Web前端工程师--Web前端学习之路

联系我们