老蔡的个人专栏正式成立,以后工作中遇到的技术问题,或者生活中对一些事物的见解,都会和大家分享!独乐乐不如众乐乐!

chrome或者微信开发平台模拟手机端测试页面正常 手机浏览器无法触发事件的问题

WEB前端 BlandonTsai 3675℃ 0评论

用手点击屏幕

在测试手机页面时,我们常用的是通过桌面浏览器的手机调试模式,或者使用微信开发平台模拟微信的运行环境,来测试手机端项目的反应情况。前两天在处理的手机商城项目,就遇到了一个棘手的问题。

电脑端桌面浏览器手机调试环境包容性很强

其实是很简单的页面触发事件,基本需求是详情页下方悬停的“加入购物车”或者“立即购买”按钮,点击的时候进行相关的业务消息提示或者跳转到购物车页面。在电脑上用桌面浏览器模拟调试的时候,功能都是正常的,console 里面连相关的报错信息都没有。那说明基本的业务流程及语法是没问题的。

但是,在手机上我用了 UC浏览器、vivo浏览器(笔者用的vivo x6 plus)以及微信打开测试页面,发现按钮点击没有丝毫反应。无论如何清缓存,如何点击,都是同一个结果:页面无反应。后来我在 JS点击事件中加入了 alert 测试语句,手机上毕竟没法 console 任何错误。发现连 alert 信息都没有出现,手机端压根就没有触发点击事件。神哪!救救我吧!

我担心会不会有些错误提示,被我忽略掉了。于是在电脑端各种点击,各种验证,页面均是正常跳转,没有任何错误信息。

那就说明:事件定义的部分语句,电脑端能够兼容执行,而手机端不仅仅认为语句有问题,而且整个JS事件的触发函数都是有误的。若不然,不会连 JS 点击事件的第一句 alert 提示都没有弹出。

手机端浏览器的运行环境一个字:strict

对语法要求太严苛。既然找到了关键节点,我排查了事件中一些可能会造成影响的执行语句,而这些语句我以前在项目中不知用过多少遍,为了照顾手机端突然好无奈!

我把重要测试块放到了 layer.mobile.js 的 弹层提示语句上,下面是项目源代码,电脑端运行正常:

弹出提示层中存在“前往购物车”和“取消”两个按钮,定义的话自然需要两个触发函数,以分别执行两种处理情况。但是我参考了一下 layer.js 手机端的 demo后,调整为以下写法:

这样调整的话,手机端终于恢复正常。不过这种写法我不敢苟同,明明两种结果判断,却没有“取消”按钮的业务处理。我的理解是毕竟属于消息提示,所以 layer.js 手机端默认认为取消动作就是不做任何其他操作。所以没有其他冗余的 function 定义。

手机端处理提示能简洁到这种程度,可能也与手机页面的轻量级有关,毕竟狭小的屏幕区域不适宜处理太复杂的业务互动,以提升用户的操作体验。

转载请注明:似水流年 » chrome或者微信开发平台模拟手机端测试页面正常 手机浏览器无法触发事件的问题

如果觉得文章还不错,欢迎打赏
喜欢 (0)or分享 (0)
头像
发表我的评论
取消评论


(1)个小伙伴在吐槽
  1. 头像
    今天办公室里几个男女在讨论用避孕套的好处和坏处,男方坚决抵制避孕套,女方大力支持使用避孕套,双方各持一词不分伯仲,这时我们办公室一个大姐问我平日用套套吗?我说:我……我...我都是包皮打个结。当时讨论就结束了。
    增达网2016-12-01 10:48 回复