飘逸的风

点滴记忆，记录日常随想

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

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

作者：飘逸的风 | 日期：2020-4-8 21:23 | 阅读：564次 | 评论：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!');
});
```
相关日志：
js 数组操作集合
25个实用的jQuery技巧和解决方案
jQuery 效果 - animate() 方法
jquery 事件方法总结
js数组去重(去除重复)的4个方法

分享到：

et_highlighter

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

取消回复

昵称

邮件地址 (选填)

个人主页 (选填)