今天在测试一个前端页面的适配时，发现在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(); //淡出消失
}
});
});
评论 （0）