问题描述:

项目在祖先元素上绑定了 touchstart,touchmove,touchend事件,用来处理全局性的事件,比如滑动翻页

正常状态下:

  • 用户在子元素上有交互动作时,默认状态下都是会冒泡到祖先元素响应

特定情况下:

  • 子元素单独绑定了事件
  • 特性情况下需要阻止全局事件

常规的做法就是stopPropagation阻止即可

但如果子元素绑定的是 click,touchmove,touchend这类事件的话,问题就来了

全局的touchstart事件也会被冒泡触发

发一段项目图:

/*** ppt事件接口** 允许用户自定义其行为*     1 支持14种操作行为*     2 默认对象都具有滑动翻页的特性*     3 翻页的特性在遇到特性的情况可以被覆盖*     比如*         行为1:用户定义该名字可以支持  click 点击行为, 那么该元素左右滑动能过翻页*         行为2:用户如果定义swipeLeft 行为,该元素左右滑动将不会翻页,因为默认翻页已经被覆盖* * 此接口函数有作用域隔离*/
Xut.define('Xut.PPTevent', {//数据库预定义14个事件接口defauleEventType: ['null', 'auto', 'tap', 'drag', 'dragTag','swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap','longTap', 'mTouchMagnify', 'mTouchNarrow', 'mTouchRotate'],//绑定事件bind: function(element, evtName, fn) {element.on(Xut.START_EV, function(e) { //阻止 mousedown事件冒泡
            e.stopPropagation();});element.on(evtName, fn); //绑定真正事件},

on绑定的事件替换成硬编码容易理解
   bind: function(element, evtName, fn) {element.on('mousedown', function(e) { //阻止 mousedown事件冒泡e.stopPropagation();});element.on('swipeLeft', fn); //绑定真正事件},

给元素绑定'swipeLeft'滑动事件,同时阻止'mousedown'冒泡到祖先元素,此时理论上就可行了

这样处理之后zepto移动事件确失效了

Zepto事件绑定

    $(document.body).bind('touchstart', function(e){now = Date.now()delta = now - (touch.last || now)touch.el = $(parentIfText(e.touches[0].target))touchTimeout && clearTimeout(touchTimeout)touch.x1 = e.touches[0].pageXtouch.y1 = e.touches[0].pageYif (delta > 0 && delta <= 250) touch.isDoubleTap = truetouch.last = nowlongTapTimeout = setTimeout(longTap, longTapDelay)}).bind('touchmove', function(e){cancelLongTap()touch.x2 = e.touches[0].pageXtouch.y2 = e.touches[0].pageYif (Math.abs(touch.x1 - touch.x2) > 10)e.preventDefault()}).bind('touchend', function(e){cancelLongTap()

zepto移动事件失效的根源找到了,不能阻止事件冒泡了,不能拦截了

偏偏Zepto不让你这么安逸,学jquery的live()方法一样,把事件给绑到body元素上了, jquery1.7后就去掉了,zepto你也要跟上呀

处理的办法:

子元素上增加一个hack标记, 控制器冒泡过滤排除

        onTouchStart: function (e) {var point = Xut.hasTouch ? e.touches[0] : e;if (!point) return;this.bindDefaultEventId = null;var children = point.target.offsetParent.children[0];//处理默认特性if (children.getAttribute('bindDefaultEvent')) {this.bindDefaultEventId = children.id;} else {var className = point.target.className;if (className && className === 'triggerAction') {//Actoin热点,通过冒泡捕获到} else {if (className !== 'widgetwapper') {this.start = void 0;return;}}}

移动web app开发必备 - zepto事件问题相关推荐

  1. 移动web app开发必备 - 异步队列 Deferred

    背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...

  2. Google Web App开发指南

    http://www.html5rocks.com/webappfieldguide/case-studies/case-study-intro/ 第一章:什么是Web Apps? 很多人向我问起学习 ...

  3. 【知识整理】聊聊web app开发的那些事

    一.什么是web app? 根据本人理解,通俗点讲,web app是用前端的HTML5.CSS3.JavaScript借助于适当的web app开发SDK或平台整合开发,可以编译为兼容大多数Andro ...

  4. iUI:移动Web应用开发必备的开源框架

    iUI:移动Web应用开发必备的开源框架 发表于 2014-03-11 11:29|  4956次阅读| 来源 CSDN|  12 条评论| 作者 刘璐璐 移动开发 iOS iUI Web框架 HTM ...

  5. Web App开发技巧

    webApp和nativeApp的区别 Native App 开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 更新体验较差.同时也比较麻烦.每一次发布新的版本,都需要做 ...

  6. web系统 手机app 能访问吗?_成都APP开发:原生APP开发与Web APP开发有什么区别呢?...

    智能手机上的APP应用软件对于人们来说已经成为日常工作生活当中必不可少的工具,无论是工作生活中的聊天交流,购物,饮食,出行,娱乐都会有相应的APP软件.目前常见的APP软件开发模式有两种,一种是原生A ...

  7. web app开发技巧总结

    Web APP开发技巧总结 一.META/LINK相关: 1.百度禁止转码 通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁 ...

  8. 适合前端工作者的iPhone Web App开发

    iPhone有着丰富的软件资源,到目前为止,仅在appStore上架的软件就达十多万个,而相比之下,有着10年历史的WM系统却不过只有大约2万个应用程序. 随着ipad和iphone 4的发布,iph ...

  9. java 开发手机web,手机web app开发笔记

    各位朋友好,最近自学开发了一个手机Web APP,"编程之路",主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特 ...

最新文章

  1. sdut 2506 完美网络(优先队列)
  2. 系统、应用监控的缜密思路,堪称性能瓶颈的克星
  3. 帆软单点登录_电子表格FineReport教程:[20]CAS单点登录
  4. css 不规则边角_如何实现带有边角的CSS边框
  5. 浪潮服务器 虚拟光驱,使用IPMI功能远程安装Windows Server 2003操作系统步骤
  6. Test 2018-07-19 二中集训
  7. 大数据之-Hadoop3.x_MapReduce_Combiner概述---大数据之hadoop3.x工作笔记0118
  8. Spring-core-Environment/profiles
  9. 多功能PCIE交换机之七:单NT到双NT
  10. three.js 使用DragControls.js 拖动元素
  11. 使用winedt写论文遇到的一些小问题
  12. linux没有浏览器如何卸载,在Ubuntu系统中安装Opera浏览器及卸载的方法
  13. java性能调优_Java性能调优常用手段
  14. [转载]揭秘骇人的湘西“赶尸”奇俗
  15. 线段树入门(线段懵逼树、加了一些解释,丰富了一下内容)
  16. 破解jQuery插件收费、下载币(单页扒站小工具)
  17. ODU帧转OTU帧流程
  18. java从入门到精通视频教程
  19. 小 tips:删除word表格下面多余的空白页
  20. 最新易语言调用大漠插件制作脚本入门教程

热门文章

  1. redux解决了什么问题?
  2. mysql数据库编程(c 语言)_【C/C++学院】(23)Mysql数据库编程--C语言编程实现mysql客户端...
  3. java和ajax超时_java – 如何在不重置tomcat的会话超时的情况下执行经过身份验证的AJAX请求?...
  4. java游戏快捷存档_《minecraft》JAVA存档
  5. 批量替换字符串,将其中的数字递增(两种方法)和circlr.js插件的使用
  6. python用一行代码计算1~100的和(用reduce()和sum()内置函数实现)
  7. 安装MYSQL的思考与分析_mysql安装和基本使用
  8. mediacodec延时_FFmpeg优化点播延时方案
  9. css3直线运动_纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)
  10. python语句块的定义_第五章、Python语句