jQuery移动端点击区域事件不生效解决办法

今天在测试一个前端页面的适配时，发现在PC端完全正常的点击事件移动端却没有效果。据网友所说，移动端的点击事件存在touch穿透效果，所以正常的PC端写法在移动端可能会出现不适应的情况，解决办法如下。

JavaScript教程

首先是正常写法

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

});

按照上面的写法PC端没问题，但移动端的关闭却没效果，问题出在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(); //淡出消失
}
});

});