JS 对于 Android 和 IOS 平台的点击响应的适配

举报
崔庆才丨静觅 发表于 2021/05/22 00:43:02 2021/05/22
【摘要】 综述 最近做项目的时候发现了一个非常奇怪的问题，就是对于 click 事件的响应。经过测试发现，对于 IOS 平台，直接监听 click 事件可能是没有响应的，而在 Android 和 PC 上则完全没有问题。所以通过获取设备信息实现了不同平台的不同监听。 IOS 监听 对于 IOS 设备，只监听 click 方法可能是没有响应的。解决方法就是监听 “touchend cl...

综述

最近做项目的时候发现了一个非常奇怪的问题，就是对于 click 事件的响应。经过测试发现，对于 IOS 平台，直接监听 click 事件可能是没有响应的，而在 Android 和 PC 上则完全没有问题。所以通过获取设备信息实现了不同平台的不同监听。

IOS 监听

对于 IOS 设备，只监听 click 方法可能是没有响应的。解决方法就是监听 “touchend click” 事件。 而对于 Android 和 PC，则只监听 click 事件即可。

平台检测

我们利用 userAgent 来检测平台

1
2
3
4
5
6
7
8
9
 
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
 //alert(navigator.userAgent);  
 alert("iOS");
} else if (/(Android)/i.test(navigator.userAgent)) {
 //alert(navigator.userAgent); 
 alert("Android");
} else {
 alert("PC");
};

上面的 JS 代码可以检测三个平台。

实现监听

我们可以把方法自定义名字，比如

1
2
3
4
5
 
function back_click(){
		$(".group-names").show();
		$(".groups:visible").hide();
		$(this).hide();
	}

然后跨平台实现监听

1
2
3
4
5
6
 
/* bind the event */
	if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
		$(".back").bind({"touchend click":back_click});
	}else{
		$(".back").bind({"click":back_click});
	}

通过以上监听便没有问题了。

总结

通过以上方法便可以实现不同平台的监听。

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/1687.html

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Android iOS
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入