H5页面点击事件不生效问题如何解决？

当前位置：首页》前端》正文

H5页面点击事件不生效问题如何解决？

作者：飘逸的风 | 日期：2020-4-8 21:23 | 阅读：1620次 | 评论：0人 | 分类：前端
H5页面里的标签绑定了点击事件，但是点击时有时不生效，直接使用 $(document).on(‘click’,function(){}) 绑定了点击事件，在点击它的子元素的时候点击事件并不生效。但是在浏览器模拟一切正常。遇到这种情况，以下是几种解决方案可供参考：

1、给需要绑定事件的元素添加一个css cursor: pointer ，事件依然用click事件：
```
.div{cursor:pointer;}
```
2、第二种解决方案是JS将click事件替换为touchstart事件（如果要兼容电脑端，就需要两个事件并存），或者click事件与touchstart事件并存：
```
// 替换touchstart
$(document).on("touchstart",".farmGoods",function(){
     alert('hello world!');
});

// click 与 touchstart 并存
$(document).on("click touchstart",".farmGoods",function(){
    alert('hello world!');
});
```
相关日志：
jQuery自适应宽度导航插件HorizontalNav
让Div浮动层浮在Flash上面下去,div在flash上,层在flash上
html+css 中 em和px 的尺寸解释
CSS如何实现手机端底部导航绝对居中
jquery 如何获取单选多选值

分享到：

et_highlighter

欢迎您收藏分享飘逸的风博客！
标签: JS 兼容性问题
上一篇：微信内置浏览器打开网页有时JS无法执行问题解决方案 | 下一篇：一些杂想

取消回复

昵称

邮件地址 (选填)

个人主页 (选填)

飘逸的风

点滴记忆，记录日常随想、工作随笔与技术资料分享

H5页面点击事件不生效问题如何解决？

搜索

存档

最新评论

最新日志

链接