天天看點

移動web app開發必備 - zepto事件問題問題描述:發一段項目圖:Zepto事件綁定子元素上增加一個hack标記, 控制器冒泡過濾排除

項目在祖先元素上綁定了 touchstart,touchmove,touchend事件,用來處理全局性的事件,比如滑動翻頁

正常狀态下:

使用者在子元素上有互動動作時,預設狀态下都是會冒泡到祖先元素響應

特定情況下:

子元素單獨綁定了事件

特性情況下需要阻止全局事件

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

但如果子元素綁定的是 click,touchmove,touchend這類事件的話,問題就來了

全局的touchstart事件也會被冒泡觸發

<a></a>

2

<code>on綁定的事件替換成寫死容易了解</code>

<code>bind:</code><code>function</code><code>(element, evtName, fn) {</code>

<code>     </code><code>element.on(</code><code>'mousedown'</code><code>,</code><code>function</code><code>(e) {</code><code>//阻止 mousedown事件冒泡</code>

<code>         </code><code>e.stopPropagation();</code>

<code>     </code><code>});</code>

<code>     </code><code>element.on(</code><code>'swipeLeft'</code><code>, fn);</code><code>//綁定真正事件</code>

<code> </code><code>},</code>

給元素綁定'swipeLeft'滑動事件,同時阻止'mousedown'冒泡到祖先元素,此時理論上就可行了

這樣處理之後zepto移動事件确失效了

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

偏偏Zepto不讓你這麼安逸,學jquery的live()方法一樣,把事件給綁到body元素上了, jquery1.7後就去掉了,zepto你也要跟上呀

處理的辦法:

 本文轉自艾倫 Aaron部落格園部落格,原文連結:http://www.cnblogs.com/aaronjs/p/3169480.html,如需轉載請自行聯系原作者