1、移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果

解决方案:event.preventDefault();//阻止浏览器默认事件即可


2、阻止浏览器默认事件之后发现这添加了滑动事件的dom节点上下滑动也失效,这是一个很坑爹的地方,如果你的活动dom节点占据了整块屏幕,也就是说你的页面上下动不了了;

解决方案:设置两个开关,分别对应左右滑动和上下滑动,即左右滑动的时候才阻止默认事件,上下滑动的时候并没有阻止,代码如下:

												

关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧的更多相关文章

  1. 随笔一个dom节点绑定事件

    以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的 ...

  2. Jquery 查看DOM上绑定的事件列表

    $(dom).data( "events" ); 包括事件类型和关联的处理函数 下面是firefox的截图

  3. 给DOM元素绑定click事件也有学问

    最简单的莫过于使用click方法: 1 <input id="btn" type="button" value="BUTTON" on ...

  4. 给echart初始化的dom节点绑定时间获取点击的值渲染省市区

    this.drawMap().on('click', function (params) { var province = params.name; that.mapStatus = province ...

  5. 移动端表层div滑动,导致底层body滑动(touchmove的阻止)

    body很长,可以滑动,body头部有一个模拟下拉的选择框,下拉选择有滚动轴 我给body一个overflow:hidden和高度是没有用的.手机网站上背景还是可以滑动,然后我给body一个touch ...

  6. ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案

    期望实现,输入数字后,回车直接执行点击按钮"转换" 无效写法: <el-input v-model="input" placeholder="请 ...

  7. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

  8. 浏览器中开发人员工具快速找到dom元素绑定那些JS事件

    在web开发过程中难免会遇到让程序员去修改一些js代码东西,例如js的ajax和php等语言的交互等,在这其中你不得不了解点js的事件触发,且随着js的盛行各种插件的事件让程序员眼花缭乱,所以借助一个 ...

  9. 一个DOM元素绑定多个事件时,先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

随机推荐

  1. make clean vs make clobber

    make is pretty smart, and picks up what has changed from the last build, so if you run repo sync and ...

  2. NDK(5) Android JNI官方综合教程[JavaVM and JNIEnv,Threads ,jclass, jmethodID, and jfieldID,UTF-8 and UTF-16 Strings,Exceptions,Native Libraries等等]

    JNI Tips In this document JavaVM and JNIEnv Threads jclass, jmethodID, and jfieldID Local and Global ...

  3. 《OD大数据实战》MapReduce实战

    一.github使用手册 1. 我也用github(2)——关联本地工程到github 2. Git错误non-fast-forward后的冲突解决 3. Git中从远程的分支获取最新的版本到本地 4 ...

  4. 2016MBA排名

    2016全球商学院100强 2016上半年度最受欢迎的十大MBA排名 网上评选出上年度最受欢迎的十大MBA排名,有你想要报考的院校吗?快来一睹这些MBA院校的风采,选择好适合自己的院校项目. 第1名 ...

  5. 转:ORACLE的JDBC连接方式:OCI和THIN

    oracle的jdbc连接方式:oci和thin oci和thin是Oracle提供的两套Java访问Oracle数据库方式. thin是一种瘦客户端的连接方式,即采用这种连接方式不需要安装oracl ...

  6. R语言实战读书笔记(五)高级数据管理

    5.2.1 数据函数 abs: sqrt: ceiling:求不小于x的最小整数 floor:求不大于x的最大整数 trunc:向0的方向截取x中的整数部分 round:将x舍入为指定位的小数 sig ...

  7. Windows 桌面软件:不绑定bing搜索的缤纷桌面

    bing:世界上最好的壁纸提供商  ^.^一直垂涎着Bing的壁纸,总是想找机会来一番邂逅. 之前使用bing自家的缤纷桌面.这个软件缺点就是和bing搜索绑定太厉害,放在桌面上感觉那个黑色的条框很碍 ...

  8. android 呼入电话的监听(来电监听)转

    需要权限: <uses-permission android:name="android.permission.READ_PHONE_STATE" /> 方式一:通过广 ...

  9. IntelliJ IDEA使用总结篇

    解决控制台中文乱码的问题: 1.windows下改intellij安装目录下bin\idea.exe.vmoptions文件 加上 -Dfile.encoding=UT 2.设置IDEA server ...

  10. Python 删除 数组

    numpy删除一列 从0开始,第三个参数是第几个维度  可以多删几个