jQuery_jquery に Webkit タッチを追加する方法-jsチュートリアル-php.cn

jQuery_jquery に Webkit タッチを追加する方法

WBOY

リリース： 2016-05-16 17:01:40

オリジナル

1184 人が閲覧しました

このコードは、jQuery にタッチイベントのサポートを追加するために 13 年間アルバイトをしていたときに退屈から追加されました。少し退屈だったので、モバイルデバイス (主に Webkit モバイルデバイス) と互換性のある、JS touch を使用したレスポンシブ Web ページを顧客が追加するのを手伝いました。

ここで私の実装を共有します。
最初にコードを貼り付けます:

コードをコピーコードは次のとおりです:

//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;
}
}
}
}

//jqueryにイベントを追加
for (indream.touch.evenList の var eventName) {
var イベント = indream.touch.evenList[evenList[eventName]];
$.fn[eventName] =event.eventFunction || (function (eventName, htmlEvent) {
return function (action) {
$(this).each(function () {
$(this).bind(htmlEvent, action);
/ /IE などのイベントリスナーメソッドを追加
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);

タッチイベントに関する関連情報はネット上にたくさんあるので、詳しくは説明しませんが、簡単に説明します。

タッチイベントがマウスイベントを置き換えます
Webkit モバイルデバイスでは、タッチコントロールは最初にタッチイベントをトリガーし、0.5 秒後にタッチマウスイベントをトリガーします。

個人的には、デザインの観点からこれは理解できると思います。まずタッチコントロールのニーズを満たし、次にマウスイベントとの「下位」互換性を備えて、元のデスクトップ指向の Web ページの使用に対応します。

すべてのイベントのおおよその実行順序は次のとおりです: touchstart->touchmove->touchend->0.5s->mouse イベント、mouseover/scroll/click など

Webkit モバイルブラウザの設計によれば、デスクトップ Web ページに従って開発し、それをモバイルデバイスで使用することは通常問題ありません。ただし、デスクトップで広く使用されているホバー効果は、タッチによってマウスイベントとクリックイベントが何度もトリガーされるため、多くの場合悲劇的です。0.5 秒の遅延もユーザーエクスペリエンスに大きな悪影響を及ぼします。

そこで、click イベントを置き換えて 0.5 秒間消すために、tapOrClick イベントを追加しました。

Scroll Lock
ユーザーがタッチデバイスを使用してスクロールし、タッチが停止すると、ブラウザはページ全体をロックし、すべての UI リソースの占有を一時停止し、スクロール用にほとんどのリソースをカーネルに任せます。ページのコンテンツをズームインまたはズームアウトすると、同じ状況が発生し、さらにそれが起こります。

ローリンググラデーション効果を追加したいので、スライド時のスクロール中に実行されるべき効果を実行する moveOrScroll イベントを追加しました。

もちろん、これはまだ完全ではありません。指が画面から離れると (タッチイベントが停止すると)、ページが自由にスクロールしている間、js もフリーズします。これは解決策がない中の解決策にすぎません。

スクロールロックは別の問題も引き起こします。スクロールには、上下、左右、フリーの 3 種類があります。

タッチデバイスを使用している場合、タッチから上下にスクロールしていると判断された場合、タッチ時に左右にどのようにスライドしても、そうでない限り、左右のスライド効果はありません。あなたは手放して最初からやり直します。左右のスクロールでも最初は同じことが起こります。フリースクロールは最初から斜めスクロールが必要です。

この時点で特定のイベントを追加する必要がある場合は、イベントの判定に注意する必要があります。 jQuery のイベントコールバックパラメーターでは、パラメーター名が e であると仮定して、通常は次を使用します:

e.originalEvent.touches[0].pageX はタッチ状況を判断できます。開発中は、判断する前にタッチイベントを自分で記録する必要があります。

ネイティブかつ最適
あなたが持っていないスタイル効果を実現するために、多数の JS メソッドトリガーを使用しないようにしてください。

たとえば、要素が静的な場合は、position:fix; を使用して実装する必要がありますが、多くの開発者は、コントロールの位置を継続的に更新するために js を使用します。

この実装がタッチデバイスに配置される場合、通常は次の 2 つの状況のみが発生します。

1. スタックします
2. ページがフリーズした後、すべてのイベントが実行されたことが突然わかります (理由は上記の通り、ブラウザーが UI スレッドのリソースを集中させます)。カーネルを優先するため)
一般的なモバイルデバイスの画面実効リフレッシュレートはわずか 30Hz で、命令セットが削減された CPU 自体は遅くなり、さらにほとんどのモバイルデバイスは...Android...

したがって、パフォーマンスはネイティブに提供されるメソッドに可能な限り依存する必要があります。ハッキングやカバーの手法の中には、相手にとって耐えられないものもあります。

使い方
当時、パートタイムの納品は1～2週間しかかからないようだったので、コードはあまりうまく書けませんでしたが、それでも動きました。一般的な使用法は通常の jQuery イベントと同じです。

という名前と実装については議論の余地があります。

コードをコピーコードは次のとおりです:

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

プロジェクトの多くのことと同様、多くのことは単純に見えますが、実際にはさまざまな問題が発生します。

タッチイベントは単に機能を実現するだけでなく、最も重要な問題である特定のインタラクションモードも考慮する必要があります。

たとえば、限られたユーザー画面により多くのスペースを残すために、タッチで多くのスペースを非表示にする必要があります。最高のタッチエクスペリエンスを実現するには、クリックによって切り替えられる多くの要素をスライド切り替えに変更する必要があります。条件を考慮する必要があります。各タッチイベントの異なる滞在イベントは異なる操作を表す可能性があるため、区別する必要があります...

jQuery Mobile などにはすでにさまざまな比較的完成度の高いメソッドがあることは知っていますが、自分で実装せずにはいられません。