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

2015-11-04阅读(7511)评论(0)牵着狗狗看MM

苏州实时公交查询

先看下面这段JS代码:

[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(); //淡出消失
}
});

});
[/js]

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

解决方案:

把JS中document稍作修改如下:
[js] $(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(); //淡出消失
}
});

});
[/js]

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 移动端document点击事件无效解决方法
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏