解决百度地图移动端map信息窗口click后消失,且不触发事件的问题

问题描述

需求:点击一个定位点,弹出信息窗口,再点击“签到”跳转到签到页面。
当前bug:
(1)点击定位点,正常弹出信息窗口;点击“签到”(或任意位置),信息窗口直接被关闭了,并且没有跳转。
(2)移动端模式下有问题(浏览器模拟移动端、iphone手机浏览器),PC模式下没问题。如下图:
移动端模式下有问题:
移动端模式下有问题
PC模式下没问题:
PC模式下没问题

答案

相关按钮的addEventListener 将click事件改为 touchend事件。
因为移动端的click和PC端的不一样,可能受其他影响
(例如300m的延迟better-scroll等)
资料:资料链接
在这里插入图片描述

排查历程

1、首先就是在各层都绑上监听器,监听click事件。
发现点击地图时,能监听到click;点击信息窗口时,不能监听到click。
2、从F12的3D视图,查看z-index,发现没有被其他图层遮盖,手动加了个z-index:999,还是无效。
3、打印bmap对象,找到了bmap._listeners,里头有很多方法,想想是不是有冲突。
然后就设置定时器,在我点开定位点后,删除除click外的全部方法。
删除后点击,不再出现信息窗口消失的问题,但同时也不触发信息窗口里的按钮click事件。
由此确定就是这个click的问题。
4、在签到按钮(信息窗口里的按钮)绑定监听click事件后,直接调用btn.click(),有效,正是我想要的效果。确定了click可能是冲突 / 不兼容。
5、查找资料,300m延迟、better-scroll、tap与click、Al推荐的检查click事件等等,都无关。
6、最后找到了答案:click换touchend即可

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值