解决ios中的onclick失效的问题

前段时间笔者跟同事一起开发移动端H5界面,后来在测试时,发现一些界面的onclick事件在苹果ios上不管用,因为笔者跟同事之前一直做PC端开发,不太清楚怎么回事,于是在网上找到如下几种方案:

一.修改css方法

将绑定事件的span元素添加 z-index 跟cursor:pointer,这个没管用

二.修改onclick的绑定

直接把onclick事件换成

$('span').on('tap',function(){})

后来才知道需要引入第三方才能使用tap事件,我们引用了mui.js,(此处不要吐槽我们的技术栈,毕竟我们这个项目........哈哈)

三,最后的解决方案

$('body').on('tap','.map-tips-right',function(){
});

这个span元素是下图地图中的详情

四.解决方案参考的内容

使用touch系列事件,但是touch系列事件有点击穿透问题,解决方案如下

把页面内所有的click全部全称touch事件(touchstart,touchend,tap),需要特别注意a标签,它的href也是click,需要去掉(href="####"或href="javascript:void(0)"),换成js控制跳转,或者直接改成span+tap控制跳转(这个是笔者提及的第三条我们应用的解决方案).如果要求不高,不在乎滑走或者滑进来触发事件的话,使用span+touchend就可以了,毕竟tap需要引入第三方库

ps:找不到第四所列的那篇文章链接, 在这谢谢那位作者o(*￣︶￣*)o