iPad 上的chrome "切换到桌面网站" 导致的mouse over效果
更新:HHH   时间:2023-1-7


背景1:做一个普通的网站,其中有一个效果是 当把光标(onmouseover效果)放到左边一些(多个)小图标上后,需要改变右边的文字内容,移开时恢复,点击这些小图标的时候,再改变右边这些内容(可以理解为移上去是预览,点击后才确定)。

背景2:如果是用手机或者pad之类的设备访问,那么自然就没有onmouseover效果,就没有预览,只有点击才会切换内容,但chrome有一个选项叫做“切换到桌面网站”,意思是说当选择后,当前页面会以电脑的模式来解析。

问题:如果选择了这个“切换到桌面网站”,那么onmouseover就会起作用,但怎么工作的呢?实际上卞是点击一下当成是onmouseover,再点击一下才是click,那么问题来了,那如何实现onmouseout呢?答案是:没有。那么问题又来了,当在pad上使用的时候,会自然的点击一下,就以为是点击了,不会点击两下,这听起来没什么问题,但如果:右边的内容中,有可点击的按钮(就是说这些右边的按钮是随着左边的图标的切换而改变的),这时候就有问题了:右边的按钮是不能点击的,或者说当点击的时候,会返回到之前的状态(前一个左边的图标所对应的右边的内容)。

解决:做判断,在手机或者pad上,去掉onmouseover效果,那问题又来了:就算用js等做了判断,如果是非电脑设备在访问,那么就不要onmouseonver效果,但这个chrome的“切换到桌面网站”,实际上是会被当成电脑来访问的,所以还是会有onmouseover效果。怎么办呢?我也没有找到办法,只能给个提示信息说:亲爱的客户,您需要点击”两次“图标才能成功切换右边的内容....



结语:这个问题是客户反馈过来的,他用一个ipad装了一个chrome发现了这个问题(话说我不知道为什么他要在ipad上装chrome,是因为不喜欢safari吗...),真心不懂



返回开发技术教程...