欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

為jQuery添加Webkit的觸摸的方法分享

 更新時間：2014年02月02日 18:58:47   作者：  
這段代碼是我在做13年一份兼職的時候無聊加上去的，為jQuery添加觸摸事件的支持。因為做得有點無聊，所以就幫客戶添加了用響應(yīng)式網(wǎng)頁+JS touch兼容了移動設(shè)備，主要是Webkit的移動設(shè)備

這段代碼是我在做13年一份兼職的時候無聊加上去的，為jQuery添加觸摸事件的支持。因為做得有點無聊，所以就幫客戶添加了用響應(yīng)式網(wǎng)頁+JS touch兼容了移動設(shè)備，主要是Webkit的移動設(shè)備。

這里就分享下我的實現(xiàn)。
先貼上代碼：

復(fù)制代碼 代碼如下:

//Published by Indream Luo
//Contact: indreamluo@qq.com
//Version: Chinese 1.0.0

!function ($) {
    window.indream = window.indream || {};
    $.indream = indream;

    //Define events
    indream.touch = {
        evenList: {
            touchStart: {
                htmlEvent: 'touchstart'
            },
            touchMove: {
                htmlEvent: 'touchmove'
            },
            touchEnd: {
                htmlEvent: 'touchend'
            },
            tapOrClick: {
                eventFunction: function (action) {
                    $(this).each(function () {
                        (function (hasTouched) {
                            $(this).touchEnd(function (e) {
                                hasTouched = true;
                                action.call(this, e);
                            });
                            $(this).click(function (e) {
                                if (!hasTouched) {
                                    action.call(this, e);
                                }
                            });
                        }).call(this, false);
                    });

                    return this;
                }
            },
            moveOrScroll: {
                eventFunction: function (action) {
                    $(this).each(function () {
                        (function (hasTouched) {
                            $(this).touchMove(function (e) {
                                hasTouched = true;
                                action.call(this, e);
                            });
                            $(this).scroll(function (e) {
                                if (!hasTouched) {
                                    action.call(this, e);
                                }
                            });
                        }).call(this, false);
                    });

                    return this;
                }
            }
        }
    }

    //Add events into jquery
    for (var eventName in indream.touch.evenList) {
        var event = indream.touch.evenList[eventName];
        $.fn[eventName] = event.eventFunction || (function (eventName, htmlEvent) {
            return function (action) {
                $(this).each(function () {
                    $(this).bind(htmlEvent, action);
                    //Add event listener method for IE or others
                    if (this.attachEvent) {
                        this.attachEvent('on' + htmlEvent, function (e) {
                            $(this).on(eventName);
                        });
                    } else {
                        this.addEventListener(htmlEvent, function (e) {
                            $(this).on(eventName);
                        });
                    }
                });

                return this;
            }
        })(eventName, event.htmlEvent);
    }
}(window.jQuery);

網(wǎng)上能找到很多關(guān)于Touch事件的相關(guān)信息，所以我就不詳細(xì)說明了，可以解釋得簡單一點。

觸摸事件代替鼠標(biāo)事件
在Webkit移動設(shè)備上，觸摸操控首先會觸發(fā)觸摸事件，在0.5秒后才會觸摸鼠標(biāo)事件。

個人覺得這在設(shè)計上可以理解。先滿足于觸摸操控的需求，然后再向“下”兼容鼠標(biāo)事件，以滿足原有面向桌面網(wǎng)頁的使用。

所有的事件大致執(zhí)行順序是：touchstart->touchmove->touchend->0.5s->鼠標(biāo)事件mouseover/scroll/click等

按照webkit移動瀏覽器的設(shè)計，一般開發(fā)時候按照桌面網(wǎng)頁開發(fā)，然后移動設(shè)備上使用是沒問題的。不過桌面上大量使用的hover類效果時常會因為觸摸把mouse事件+click事件觸發(fā)個遍而悲劇；0.5秒的延遲也對用戶體驗造成了大傷害。

所以我添加了tapOrClick事件，用途就是替代click事件，并且滅了那0.5秒。

滾動鎖定
在用戶使用觸摸設(shè)備進(jìn)行滾動，而觸摸已經(jīng)停止的時候，瀏覽器會鎖定整個頁面，暫停所有UI資源占用，而把大部分資源留給內(nèi)核進(jìn)行滾動。同樣的情況還會發(fā)生在放大縮小頁面內(nèi)容，甚至更甚。

因為要加個滾動漸變的特效，所以我添加了moveOrScroll事件，在滑動的時候執(zhí)行滾動中應(yīng)該執(zhí)行的效果。

當(dāng)然，這里還是不完美的，因為手指一旦離開屏幕（觸摸事件停止），頁面自由滾動的這段時間，js也會被freeze。這只是沒有辦法中的辦法而已。

滾動鎖定還會導(dǎo)致另一個問題就是：滾動有三種，分別是上下、左右、自由。

用一下觸摸設(shè)備就會發(fā)現(xiàn)，如果從觸摸開始被判定是上下滾動，那么觸摸時再怎么左右滑動都不會有左右滑動的效果，除非放開重來。同樣的情況也會發(fā)生在一開始為左右滾動。自由滾動的話需要一開始就進(jìn)行斜向滾動。

在這個時候如果需要加入特定事件的話，需要注意事件的判斷。在jQuery的事件回調(diào)參數(shù)中，假設(shè)參數(shù)名為e，那么一般用：

e.originalEvent.touches[0].pageX可以判斷觸摸情況。開發(fā)時需要自行記錄觸摸事件的情況再作判斷。

原生最優(yōu)
請盡量不要嘗試用大量的JS方法觸發(fā)來實現(xiàn)一些本身沒有的樣式效果。

比如元素靜態(tài)不動，理應(yīng)用position:fix;來實現(xiàn)，但許多開發(fā)人員會是用js不斷刷新其控件位置來解決。

這種實現(xiàn)方式放在觸摸設(shè)備上，一般只會出現(xiàn)兩種情況：

1.卡死你
2.頁面被凍結(jié)，凍結(jié)技術(shù)后突然發(fā)現(xiàn)事件全部執(zhí)行完了（原因如上，瀏覽器會集中UI線程的資源給內(nèi)核優(yōu)先）
一般移動設(shè)備的屏幕有效刷新率不過30Hz，精簡指令集的CPU本身也會慢一些，加上大部分的移動設(shè)備都是...Android...

所以，性能必須盡量依賴原生提供的方法。一些Hack和Cover的方法對方受不了。

如何使用
當(dāng)時因為兼職交付好像就一兩周的事情，所以沒有把代碼寫得太好，不過還是能用。大致的用法跟普通的jQuery事件一致，命名和實現(xiàn)方面確實還值得商榷：

復(fù)制代碼 代碼如下:

$('.sign .usernametip').tapOrClick(function () {
    $(this).css('visibility', 'hidden');
    $('.sign .username').focus();
});

跟項目中的很多事情一樣，許多事情看似簡單，但實際上卻會出現(xiàn)各種各樣的問題。

觸摸事件并不是簡單地便可兼容，單實現(xiàn)了功能外還需要顧慮最實質(zhì)的問題——特定的交互模式。

比如觸摸中需要隱藏許多空間以留有更多的空間給有限的用戶屏幕；許多本身以點擊切換的元素在觸摸的最佳體驗中應(yīng)該改成滑動切換，甚至要顧慮不同的滑動情況；觸摸各事件的停留事件不同可能代表不同的操作，需要進(jìn)行判別......

雖然知道jQuery Mobile等已經(jīng)有比較完善的各種方法，不過就是忍不住自己實現(xiàn)一下看看。

相關(guān)文章

最新評論