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

飘逸的风6年前 (2020-04-08)前端5159
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版的in_array和is_array

写PHP代码是我们可以使用is_array()方法来检测一个变量是否是数组,使用in_array()来判断一个变量是否包含在一个数组中,那么在JS中我们该,如何来判断呢?   下面来分享...

实现jQuery扩展总结

开发自己需要的jQuery插件,看个示例说明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://...

jquery简单代码实现复选框多选、单选、全不选功能,很实用

<html> <head>  <script type="text/javascript" src="https://code.jquery.com/jqu...

jquery 事件方法总结

Dom: Attribute:属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",title:"te...

jQuery插件 图片放大镜-Cloud Zoom

jQuery插件 图片放大镜-Cloud Zoom

图片放大镜效果是一种不错的效果,多应用于电子商务、图片展示等网站,给用户带来更好的体验。实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 jQuery 的一个插件。和其他产品相...

jQuery下拉框美化插件DropKick

jQuery下拉框美化插件DropKick

DropKick 是一个下拉框美化插件,使用非常简单,直接为下拉框 select 调用方法即可,瞬间让你摆脱繁琐。DropKick 有 3 种主题,你可以选择一种与你的页面更加搭配的,当然你也可以自己...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。