移动web app开发必备
来源:互联网 发布:数据库故障应急预案 编辑:程序博客网 时间:2024/05/01 06:37
问题描述:
项目在祖先元素上绑定了 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; } } }
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 移动web app开发必备
- 移动web app开发必备
- 移动端web app应用开发必备知识
- 移动web app开发必备 - Deferred 源码分析
- web app页面开发必备
- 移动终端web开发必备知识
- 移动终端web开发必备知识
- 移动开发 Native APP、Hybrid APP和Web APP介绍
- 移动APP的, web 开发框架
- 移动web app开发-----调试篇
- 移动web app开发-----调试篇
- jqm移动网站开发-web app
- 为什么开发移动 Web App 更难
- 移动端web app开发备忘
- HTML5开发 移动Web App阅读器
- web实现跨平台开发移动App
- 介绍几个移动web app开发框架
- 移动web app开发小贴士,移动开发经验记录
- java实现线程的两种方法有什么区别?
- linux下通过JNI用C/C++中调用JAVA类
- 移植QT
- 书籍推荐
- 初学spring:web应用程序中使用Spring
- 移动web app开发必备
- C++语言复习-命名空间
- 策略模式
- Android 4.0 ICS SystemUI浅析——StatusBar加载流程分析
- 国嵌 答疑2
- 如何使用git为开源社区贡献力量
- Windows网络编程基本概念
- switch
- 用opengl画一个棋盘格,复制和缩放