开发移动端web页面click事件失效问题
这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时,
发现有些点击事件直接无反应,但是有些有反应;
难道是由于我页面上有用到滚动插件,里面的touch事件的preventDefault导致click失效?
于是,换成了touchSart事件试了下,效果比之前略好,但是,有重复点击事件,本小白排查了一会儿,
发现页面上明明在滚动区域有别的点击事件,为毛别的用的好好的,就这个不行,仔细对比,发现别的都是A标签,
无效的是DIV,于是,我就像发现了新大陆一样,麻溜的将DIV改成A标签,于是,妥妥的好了!
于是,我又想,难道移动端DIV的点击事件都是这么鸡肋?,然后在一个非滚动区域的DIV上绑定事件试了下,
发现没问题,于是,我总结了下,在有用到滚动touch相关的事件里阻止了默认行为时,对DIV的点击绑定失效时,
将其转成A标签即可。
开发移动端web页面click事件失效问题的更多相关文章
- 移动端web页面开发常用的头部标签设置
在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...
- 常见的移动端Web页面问题
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...
- 移动端WEB页面
百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...
- vue中router-link的click事件失效的解决办法
title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 移动端web页面滚动不流畅,卡顿闪烁解决方案
移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...
- vue 移动端在div上绑定click事件 失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
- (转)倾力总结40条常见的移动端Web页面问题解决方案
原文链接:戳这里 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太 ...
随机推荐
- linux下C获取系统时间的方法
asctime(将时间和日期以字符串格式表示) 相关函数 time,ctime,gmtime,localtime 表头文件 #include 定义函数 char * asctime(const ...
- 使用postman做接口测试(二)
参考大神总结:https://www.cnblogs.com/Skyyj/p/6856728.html 二,下边的东西工作中实际要用到了 1, postman安装 chrome浏览器打开chrome: ...
- linux文件管理 -> 系统目录结构
几乎所有的计算机操作系统都是用目录结构组织文件.具体来说就是在一个目录中存放子目录和文件, 而在子目录中又会进一步存放子目录和文件,以此类推形成一个树状的文件结构,由于其结构很像一棵树的分支, 所以该 ...
- idea开发工具下载安装教程
我用这款工具主要用于java开发 在安装这个工具之前需要配置java的环境 java的jdk环境配置 jdk:1.8 jdk官网下载链接 --->点我 进入之后,下拉 选择 jdk1.8版本 ...
- EPC摘抄
S6a MME – HSS 完成用户位置信息的交换和用户签约信息的管理,传送控制面信息 Diameter MME:主要负责信令处理及移动性管理,功能包括:NAS信令及其安全:跟踪区域(Tracking ...
- WebApi参数问题方案
原文:http://www.cnblogs.com/landeanfen/p/5337072.html
- Python 常用的内建函数
内建函数 Build-in Function,启动python解释器,输入dir(__builtins__), 可以看到很多python解释器启动后默认加载的属性和函数,这些函数称之为内建函数, ...
- 微信 JS API 支付教程
最近一个项目中用到了微信开发,之前没有做过支付相关的东西,算是拿这个来练练手,刚开始接触支付时候很懵逼,加上微信支付开发文档本来就讲得不清楚,我是彻底蒙圈了,参考了很多代码之后,算是有一点思路了. 用 ...
- [android]解析XML文件的方法有三种:PULL,DOM,SAM
PULL 的工作原理: XML pull提供了开始元素和结束元素.当某个元素开始时,可以调用parser.nextText从XML文档中提取所有字符数据.当解析到一个文档结束时,自动生成EndDocu ...
- java 多线程总结篇4——锁机制
在开发Java多线程应用程序中,各个线程之间由于要共享资源,必须用到锁机制.Java提供了多种多线程锁机制的实现方式,常见的有synchronized.ReentrantLock.Semaphore. ...