问题描述:

项目在祖先元素上绑定了 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].pageX
touch.y1 = e.touches[0].pageY
if (delta > 0 && delta <= 250) touch.isDoubleTap = true
touch.last = now
longTapTimeout = setTimeout(longTap, longTapDelay)
})
.bind('touchmove', function(e){
cancelLongTap()
touch.x2 = e.touches[0].pageX
touch.y2 = e.touches[0].pageY
if (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开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

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

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

  3. web app 开发必不可少的滑动插件 Flipsnap

    flipsnap.js一个轻量级的滑动效果JS开发库,仅有8k大小(压缩版),包含了10种滑动方式,是web app开发必备的js库,除了兼容主流的智能手机浏览器(iossafari,android, ...

  4. 微信公众平台开发:Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  5. 前端读者 | Web App开发入门

    本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...

  6. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  7. 移动端web app开发学习笔记

    移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...

  8. Native App开发 与Web App开发(原生与web开发优缺点)

    Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...

  9. WEB APP 开发标签

    第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览: 第二个meta标签是iphone设备中的safari私有meta标签,它 ...

随机推荐

  1. 常用.NET库使用总结

    Json.NET 获取类实例对应的jtoken:JObject.FromObject() 获取数组实例对应的jtoken:JArray.FromObject() Json.NET将枚举转换为int R ...

  2. 利用DelegatingHandler实现Web Api 的Api key校验

    客户端在请求Web Api时可以有以下两种方式提供API key 基于Querystring提供Api key http://localhost:57967/Api/Values?key=12345 ...

  3. CI框架之HOOKS使用流程及原理

        Ci框架中Hooks可以理解:在框架的执行流程过程中,允许开发者在固定的某些时间点上(如:调用控制器前,调用控制器后等时间点上),调用其他函数来扩充CI框架执行流程的一种方法.技术上来就是通过 ...

  4. haha3

    YOU - fhasd - fdks jf > jd sfkjd sf </div><div><span >print "helloworld&qu ...

  5. PyCharm 代码完成/代码提示

    因为python是动态语言,所以在有些情况ide会无法有效代码提示,见下: import sqlite3 conn = sqlite3.connect('d:/xxx.db') conn.  #这里按 ...

  6. Yii框架CURD方法

    在YII框架中,CURD有2种方式: 1.AR模式:2. DAO模式 AR模式下 查全部   MODEL  $model->find()->asArray()->all()查单 个  ...

  7. ThinkPHP框架的一些基础应用

    这是俺滴师傅给俺传授了的知识,特在此分享. TP框架,做PHP开发的都应该有所耳闻.下面,我们就来说说入口文件的生成: 创建新项目时,首先,在目录文件下创建一个新的文件夹.然后将Thinkphp框架文 ...

  8. PHP图形操作之生成图像验证码

    简单的验证码其实就是在图片中输出了几个字符,通过imagestring函数就能实现. 但是在处理上,为了使验证码更加的安全,防止其他程序自动识别,因此常常需要对验证码进行一些干扰处理,通常会采用绘制一 ...

  9. HDU 2689 Sort it (树状数组)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2689 Sort it Problem Description You want to processe ...

  10. java分享第十九天(TestNg的IReporter接口的使用)

     IReporter接口是干嘛的?就是让用户自定义报告的,很多人想要自定义报告,于是乎找各种插件,比如什么testng-xslt啊,reportng啊,各种配置,最后出来的结果,还不能定制化,但为什么 ...