当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

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

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

JavaScript教程

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

});

感觉很棒!可以赞赏支持我哟~

赞(2) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝