这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时,

发现有些点击事件直接无反应,但是有些有反应;

  难道是由于我页面上有用到滚动插件,里面的touch事件的preventDefault导致click失效?

于是,换成了touchSart事件试了下,效果比之前略好,但是,有重复点击事件,本小白排查了一会儿,

发现页面上明明在滚动区域有别的点击事件,为毛别的用的好好的,就这个不行,仔细对比,发现别的都是A标签,

无效的是DIV,于是,我就像发现了新大陆一样,麻溜的将DIV改成A标签,于是,妥妥的好了!

  于是,我又想,难道移动端DIV的点击事件都是这么鸡肋?,然后在一个非滚动区域的DIV上绑定事件试了下,

发现没问题,于是,我总结了下,在有用到滚动touch相关的事件里阻止了默认行为时,对DIV的点击绑定失效时,

将其转成A标签即可。

开发移动端web页面click事件失效问题的更多相关文章

  1. 移动端web页面开发常用的头部标签设置

    在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...

  2. 常见的移动端Web页面问题

    移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...

  3. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  4. vue中router-link的click事件失效的解决办法

    title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...

  5. 移动端web页面如何适配

    移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...

  6. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  7. 移动端web页面滚动不流畅,卡顿闪烁解决方案

    移动端web页面滚动不流畅,卡顿闪烁解决方案   1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...

  8. vue 移动端在div上绑定click事件 失效

    在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...

  9. (转)倾力总结40条常见的移动端Web页面问题解决方案

    原文链接:戳这里 1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太 ...

随机推荐

  1. linux下C获取系统时间的方法

    asctime(将时间和日期以字符串格式表示)  相关函数 time,ctime,gmtime,localtime  表头文件 #include  定义函数 char * asctime(const ...

  2. 使用postman做接口测试(二)

    参考大神总结:https://www.cnblogs.com/Skyyj/p/6856728.html 二,下边的东西工作中实际要用到了 1, postman安装 chrome浏览器打开chrome: ...

  3. linux文件管理 -> 系统目录结构

    几乎所有的计算机操作系统都是用目录结构组织文件.具体来说就是在一个目录中存放子目录和文件, 而在子目录中又会进一步存放子目录和文件,以此类推形成一个树状的文件结构,由于其结构很像一棵树的分支, 所以该 ...

  4. idea开发工具下载安装教程

    我用这款工具主要用于java开发 在安装这个工具之前需要配置java的环境 java的jdk环境配置 jdk:1.8 jdk官网下载链接 --->点我 进入之后,下拉  选择 jdk1.8版本 ...

  5. EPC摘抄

    S6a MME – HSS 完成用户位置信息的交换和用户签约信息的管理,传送控制面信息 Diameter MME:主要负责信令处理及移动性管理,功能包括:NAS信令及其安全:跟踪区域(Tracking ...

  6. WebApi参数问题方案

    原文:http://www.cnblogs.com/landeanfen/p/5337072.html

  7. Python 常用的内建函数

    内建函数 ​ Build-in Function,启动python解释器,输入dir(__builtins__), 可以看到很多python解释器启动后默认加载的属性和函数,这些函数称之为内建函数, ...

  8. 微信 JS API 支付教程

    最近一个项目中用到了微信开发,之前没有做过支付相关的东西,算是拿这个来练练手,刚开始接触支付时候很懵逼,加上微信支付开发文档本来就讲得不清楚,我是彻底蒙圈了,参考了很多代码之后,算是有一点思路了. 用 ...

  9. [android]解析XML文件的方法有三种:PULL,DOM,SAM

    PULL 的工作原理: XML pull提供了开始元素和结束元素.当某个元素开始时,可以调用parser.nextText从XML文档中提取所有字符数据.当解析到一个文档结束时,自动生成EndDocu ...

  10. java 多线程总结篇4——锁机制

    在开发Java多线程应用程序中,各个线程之间由于要共享资源,必须用到锁机制.Java提供了多种多线程锁机制的实现方式,常见的有synchronized.ReentrantLock.Semaphore. ...