开发移动端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作怪,因为手机分辨率太 ...
随机推荐
- REX系统了解1
REX是高通开发出来的一个操作系统,起初它是为了在Inter 80186处理器上应用而开发的,到后来才转变成应用在ARM这种微处理器上.他历经了很多版本,代码也越来越多,功能也越来越完善.REX只用不 ...
- MySQL增量备份与恢复实例【转】
小量的数据库可以每天进行完整备份,因为这也用不了多少时间,但当数据库很大时,就不太可能每天进行一次完整备份了,这时候就可以使用增量备份.增量备份的原理就是使用了mysql的binlog日志.本次操作的 ...
- eclipse安装阿里代码扫描插件
1.首先打开eclipse软件,点击工具栏上的Help,选择Install New Soft进行安装新的插件. 2.进入插件安装界面,点击Add,弹出插件地址填写界面,也可以直接在市场上搜索关键字al ...
- OpenJ_POJ 1058 Guideposts
Problem OpenJ_POJ Solution 如果我们用 \(G\) 来表示邻接矩阵,那么答案其实就是求\(\sum_{k|i}^n \binom n i G^i\) 为了消除整除的限制,我们 ...
- 在Eclipse使用Gradle
1.Gradle安装 1.Grandle官网下载Gradle,地址:http://www.gradle.org/downloads 2.设置环境变量,需要设置如下2个环境变量 2.1添加GRADLE_ ...
- docker stack 部署 rabbitmq 容器
=============================================== 2018/5/13_第1次修改 ccb_warlock == ...
- 获取SQL Server的版本信息
微软 SQL Server 版本号 产品名称 发行日期 主版本号 正式版 SP1 SP2 SP3 SP4 SQL Server 2016 2016.06.01 13.00.1601.5 13.00.1 ...
- mysql中utf8编码的utf8_bin,utf8_general_cs,utf8_bin的区别
utf8_general_ci 不区分大小写,这个你在注册用户名和邮箱的时候就要使用. utf8_general_cs 区分大小写,如果用户名和邮箱用这个 就会照成不良后果 utf8_bin: com ...
- numpy数学计算
1.求范数 np.linalg.norm norm(x, ord=None, axis=None, keepdims=False) 范数理论的一个小推论告诉我们:ℓ1≥ℓ2≥ℓ∞
- ZooKeeper的典型应用场景
<从Paxos到Zookeeper 分布式一致性原理与实践>读书笔记 本文:总结脑图地址:脑图 前言 所有的典型应用场景,都是利用了ZK的如下特性: 强一致性:在高并发情况下,能够保证节点 ...