关于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的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...
随机推荐
- hdu3270Arranging Your Team(dfs)
http://acm.hdu.edu.cn/showproblem.php?pid=3720 #include <iostream> #include<cstdio> #inc ...
- 转:Android ViewPager多页面滑动切换以及动画效果
一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了 ...
- hdu1054(二分图匹配)
题意很简单,在一颗树上找最小点覆盖. 将树染成黑白两色,构成一张二分图,然后最大匹配==最小点覆盖即可,所以一次匈牙利就可以求出来了 hdu1054 #include <iostream> ...
- BZOJ3674: 可持久化并查集加强版
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3674 题解:主要是可持久化的思想.膜拜了一下hzwer的代码后懂了. 其实本质是可持久化fa数 ...
- 在页面中使用js
JavaScript:用来在页面编写特效的,和HTML\CSS一样当都是由浏览器解析 JavaScript语言 一.JS如何运行(JavaScript,jscript,VbScript,applet ...
- ACCESS中的窗体、报表、宏模块等(ACCESS 2000)
窗体: 分为数据操作窗体,它包括单页.多页.连续.子窗口 控制窗体 信息交互窗体 窗体三种视图:“设计”视图.“窗体”视图.“数据表”视图 窗体建立的五种方式: 一:自动创建窗体 二:窗体向导(一对多 ...
- MySQL与Oracle 差异比较之七用户权限
用户权限 编号 类别 ORACLE MYSQL 注释 1 创建用户 Create user user_name identified by user_password default tablespa ...
- Nginx实现多个站点使用一个端口(配置Nginx的虚拟主机)
Nginx 是一个轻量级高性能的 Web 服务器, 并发处理能力强, 消耗资源小, 无论是静态服务器还是网站, Nginx 表现更加出色, 作为 Apache 的补充和替代使用率越来越高,目前很多大型 ...
- 对于REST中无状态(stateless)的一点认识
今天早上在Yahoo的邮件列表里看到一篇颇有意思的讨论,标题为RESTful vs. unRESTful: Session IDs and Authentication(51CTO编者注:意为REST ...
- 从IT方法论来谈RUP
在<从IT方法论来谈Scrum>中我谈到了6Ways方法框架,本篇仍用6Ways方法框架来概括的谈谈RUP方法. 软件开发过程描述了软件构造.部署和维护的一种方法.统一过程(Unified ...