关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧
1、移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果
解决方案:event.preventDefault();//阻止浏览器默认事件即可
2、阻止浏览器默认事件之后发现这添加了滑动事件的dom节点上下滑动也失效,这是一个很坑爹的地方,如果你的活动dom节点占据了整块屏幕,也就是说你的页面上下动不了了;
解决方案:设置两个开关,分别对应左右滑动和上下滑动,即左右滑动的时候才阻止默认事件,上下滑动的时候并没有阻止,代码如下:
关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧的更多相关文章
- 随笔一个dom节点绑定事件
以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的 ...
- Jquery 查看DOM上绑定的事件列表
$(dom).data( "events" ); 包括事件类型和关联的处理函数 下面是firefox的截图
- 给DOM元素绑定click事件也有学问
最简单的莫过于使用click方法: 1 <input id="btn" type="button" value="BUTTON" on ...
- 给echart初始化的dom节点绑定时间获取点击的值渲染省市区
this.drawMap().on('click', function (params) { var province = params.name; that.mapStatus = province ...
- 移动端表层div滑动,导致底层body滑动(touchmove的阻止)
body很长,可以滑动,body头部有一个模拟下拉的选择框,下拉选择有滚动轴 我给body一个overflow:hidden和高度是没有用的.手机网站上背景还是可以滑动,然后我给body一个touch ...
- ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案
期望实现,输入数字后,回车直接执行点击按钮"转换" 无效写法: <el-input v-model="input" placeholder="请 ...
- 移动端 uni-app 滑动事件 精确判断手指滑动方向
移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...
- 浏览器中开发人员工具快速找到dom元素绑定那些JS事件
在web开发过程中难免会遇到让程序员去修改一些js代码东西,例如js的ajax和php等语言的交互等,在这其中你不得不了解点js的事件触发,且随着js的盛行各种插件的事件让程序员眼花缭乱,所以借助一个 ...
- 一个DOM元素绑定多个事件时,先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...
随机推荐
- jsp中@import导入外部样式表与link链入外部样式表的区别
昨天碰到同事问了一个问题,@impor导入外部样式与link链入外部样式的优先级是怎样的,为什么实验的结果是按照样式表导入后的位置来决定优先级.今天就这个问题具体总结如下: 先解释一下网页添加cs ...
- [每天一道A+B]签到检测程序
签到检测程序,解析github提供的api内的json,解决了服务器和本地时间不同步的问题(时差+8H),实现按日期更新当前签到表.下一步是从api获取organization的信息,求出未签到的成员 ...
- VS2008下使用 CMFCPropertyGridCtrl 转载
http://blog.csdn.net/sunnyloves/article/details/5655575 在DLG中的基本应用 . 首先在Cxxdlg.h文件中加入 public: CMFCPr ...
- Redis的过滤器(SCAN)功能
在写另一篇文章( link )的时候,涉及到过滤器(filter)功能.以前没有接触过,整理如下. 主要参考这两篇: http://blog.csdn.net/u011510825/article/d ...
- 51nod1202 子序列个数
看到a[i]<=100000觉得应该从这个方面搞.如果a[x]没出现过,f[x]=f[x-1]*2;否则f[x]=f[x-1]*2-f[pos[a[x]]-1];ans=f[n]-1,然后WA了 ...
- USACO全部测试数据
链接:http://share.weiyun.com/8c37d26066ee9e63147d2af983f24290 密码:YyGL 请使用2345好压解压.
- android studio 加载第三方类库
以引入Xutil包为例 1. 将Xutil包导入到module的libs目录下 2. File->project structure 还有一种方法是在libs目录下右键点击Add as libr ...
- SAS使用SPD引擎并报Encoding错误
ERROR: Unable to open data file because its file encoding differs from the SAS session encoding and ...
- 扩容盘、SD卡扩容
内存卡的前世今生回想当年,大家都还在用着非智能机,由于功能单一,需要存储的数据也就是通讯录和短信.虽然那时也有手机游戏,但大多都是几十KB,并不需要太大的存储空间.但随着手机功能的多样化,尤其是音乐. ...
- Android MVPR 架构模式
最近我在尝试让 Google 的 IO App 变得可单元测试,我这样做的其中一个原因是验证 Freeman 和 Pryce 在引用中对单元测试的总结.即使现在我还是没有把 IOSched 中的任何一 ...