1.问题描述

用amazeUI做了个手机端网站,网站头部是一个点击按钮下拉菜单,点击页面其余区域下拉菜单隐藏。在chrome模拟安卓和iOS都可以正常触发,但是在真机实测的时候,iOS上面失效了。简单代码描述如下

    $(document).on("click", function (e) {
$("#collapse-head").css("display", "none")
});

function里面的代码不会执行。

2.解决

查阅信息后,说是iphone这些元素上没有click事件,它是touch事件

(1)有一个解决方法是给需要绑定事件的元素添加一个css cursor: pointer 。 
body{ 
cursor:pointer; 
}

(2)或者将click改为touchstart事件,或者共存

  

$(document).on(“click touchstart”, “.name”, function() {
$("#collapse-head").css("display", "none")
});

ios手机访问H5页面中$(document).on绑定无效问题的更多相关文章

  1. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  2. robotframework_如何用Chrome模拟手机打开H5页面

    由于公司目前的产品大部分都是APP端的H5页面,APP原生页面很少,测试H5页面如果去搭建appium或者macaca这类自动化平台太费时,太重而不能快速落地:与自动化的目标:提高测试效率相悖.但如果 ...

  3. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  4. 前端:微信支付和支付宝支付在pc端和h5页面中的应用

    1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...

  5. iOS bug 之 H5 页面没有弹出提示框

    描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...

  6. 手机app/h5页面http请求抓包调试

    1.抓包机器跟客户端手机连上同一wifi热点,最好是第三者提供的移动wifi,公司内网wifi网络访问有限制. 2.设置手机客户端http代理 三者关系图示:

  7. iOS设备 微信h5页面回退 内容不刷新的问题

    原因分析: 一.android 浏览器 包括微信的开发者工具 都是ok的返回可以刷新页面但是唯有iOS不行. 二.iOS 浏览器原因:history.go(-1)返回上一页后,页面内容并不会刷新.在B ...

  8. 用sublime server 启动本地服务器(手机访问电脑页面)

    安装sublime server 插件包           1.Ctrl + shift + p                      install package               ...

  9. 关于ios手机游览器针对overflow:hidden设置无效的解决办法

    Ordinarily, overflow: hidden; on the body tag is sufficient to prevent scrolling a web page, if for ...

随机推荐

  1. Spring Bean's life

    In contrast, the lifecycle of a bean in a Spring container is more elaborate. It’simportant to under ...

  2. 多线程的休息室WaitSet详细介绍

    1. 所有对象都会有一个wait set,用于存放调用了该对象wait方法之后进入block状态的线程; 2. 线程被notify之后,不一定会立即执行; 3. 线程从wait set中唤醒的顺序不一 ...

  3. tornado之用户验证装饰器

    authenticated装饰器 为了使用Tornado的认证功能,我们需要对登录用户标记具体的处理函数.我们可以使用@tornado.web.authenticated装饰器完成它.当我们使用这个装 ...

  4. iptables 限制ip访问3306端口

    *filter:INPUT DROP [0:0]  #全部关闭:FORWARD ACCEPT [0:0]:OUTPUT ACCEPT [0:0]-A INPUT -s 172.4.4.14 -p tc ...

  5. Fedora 24系统基本命令

    Fedora  24基本命令 一.     DNF软件管理 1.        修改配置:在/etc/dnf/dnf.conf中加入fastestmirror=true.keepcache=true ...

  6. codeforces960G. Bandit Blues

    题目链接:codeforces960G 来看看三倍经验:hdu4372 luogu4609 某蒟蒻的关于第一类斯特林数的一点理解QAQ:https://www.cnblogs.com/zhou2003 ...

  7. PWA 渐进式Web应用程序 - 解释

    想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA). ...

  8. jumpserver win终端无法添加

    今天遇到一个问题是,guacd,tomcat部署完成以后jumpserver终端管理页里面还是只有coco的终端而没有guacd的终端

  9. JDK TOMCAT MYSQL 配置

    Java 开发环境 环境和版本介绍: 系统环境: CentOS-7-x86_64- 1810 软件本版 J d k  版本   jdk-8u181-linux-x64 Tomcat 版本   apac ...

  10. current account(经常账户)

    python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...