关于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的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...
随机推荐
- [NYIST15]括号匹配(二)(区间dp)
题目链接:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=15 经典区间dp,首先枚举区间的大小和该区间的左边界,这时右边界也可计算出来.首先初 ...
- 《OD学算法》排序
参考 http://www.cnblogs.com/kkun/archive/2011/11/23/2260312.html http://blog.csdn.net/wuxinyicomeon/ar ...
- Projective Texture的原理与实现
http://blog.csdn.net/xukunn1226/article/details/775644 Projective Texture是比较常见的一种技术,实现起来代码也就区区的不过百行, ...
- SHOI2008 题目总结
感觉还是上海人出题水平高?这套题写得心旷神怡的...总之很难就是啦 由于我实在不适应博客园这种排版和字体..所以我的文章可能会特别难看大家见谅..说不定回头开发一个支持全局LaTeX的博客也不错?23 ...
- SPOJ 694 (后缀数组) Distinct Substrings
将所有后缀按照字典序排序后,每新加进来一个后缀,它将产生n - sa[i]个前缀.这里和小罗论文里边有点不太一样. height[i]为和字典序前一个的LCP,所以还要减去,最终累计n - sa[i] ...
- 漫游Kafka设计篇之性能优化
Kafka在提高效率方面做了很大努力.Kafka的一个主要使用场景是处理网站活动日志,吞吐量是非常大的,每个页面都会产生好多次写操作.读方面,假设每个消息只被消费一次,读的量的也是很大的,Kafka也 ...
- C#序列化XML至对象
内容来源: http://www.cnblogs.com/fish-li/archive/2013/05/05/3061816.html#_label0 自己做的Demo下载地址:Demo
- unity3d 破解安装
1.下载破解程序,执行生成unity_v4.x.ulf文件 2.断网 3.执行unity客户端,load该lisence文件即可 注意:安装unity客户端完成后,未破解,切记别打开unity客户端
- Android failed creating starting window
/***************************************************************************** * Android failed crea ...
- js解决快速回车重复订单提交(客户端方式)
Html代码: <form action="order_add_data.php" method="post" name="order_adds ...