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

このコードは、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 などにはすでにさまざまな比較的完成度の高いメソッドがあることは知っていますが、自分で実装せずにはいられません。