16

iOSのモバイルSafariからクリック/タップの遅延をどのように取り除きますか？

私はイベントリスナーをかなりいじくり回し、さまざまなスクリプト（Lightning Touchなど）を使用して喜びを感じませんでした。うまくいく解決策はいくつかありますが、これらのタイプのスクリプトでは、DOM上のすべてのリンクへの宛先要素をコーディングする必要があります。残念ながら、これにより、遷移が速くなったり遅くなったりする可能性がありますが、これはうまくいきません。

4

4 に答える 4

23

たゆまぬ検索の結果、ようやく速度の問題に対する答えが見つかりました。これはFastClickの形式で提供されます（このスレッドは、他のユーザーからのコメントにいくつかの調整を加えて、非常に詳細に説明されています）。

FastClick.jsスクリプトを組み込み、onLoadリスナーを追加し、<body>コンテンツをスパンでラップすると、アプリはよりネイティブに感じられるようになります。


onLoadリスナー： <body onLoad="initFastButtons();">

スパンラップ：

<body onLoad="initFastButtons();">
    <span id="fastclick">

    [...]

    </span>
</body>

FastClick.js

//======================================================== FASTCLICK
         function FastButton(element, handler) {
            this.element = element;
            this.handler = handler;
            element.addEventListener('touchstart', this, false);
         };
         FastButton.prototype.handleEvent = function(event) {
            switch (event.type) {
               case 'touchstart': this.onTouchStart(event); break;
               case 'touchmove': this.onTouchMove(event); break;
               case 'touchend': this.onClick(event); break;
               case 'click': this.onClick(event); break;
            }
         };
         FastButton.prototype.onTouchStart = function(event) {

event.stopPropagation();
            this.element.addEventListener('touchend', this, false);
            document.body.addEventListener('touchmove', this, false);
            this.startX = event.touches[0].clientX;
            this.startY = event.touches[0].clientY;
 isMoving = false;
         };
         FastButton.prototype.onTouchMove = function(event) {
            if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
               this.reset();
            }
         };
         FastButton.prototype.onClick = function(event) {
            this.reset();
            this.handler(event);
            if(event.type == 'touchend') {
               preventGhostClick(this.startX, this.startY);
            }
         };
         FastButton.prototype.reset = function() {
            this.element.removeEventListener('touchend', this, false);
            document.body.removeEventListener('touchmove', this, false);
         };
         function preventGhostClick(x, y) {
            coordinates.push(x, y);
            window.setTimeout(gpop, 2500);
         };
         function gpop() {
            coordinates.splice(0, 2);
         };
         function gonClick(event) {
            for(var i = 0; i < coordinates.length; i += 2) {
               var x = coordinates[i];
               var y = coordinates[i + 1];
               if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
                  event.stopPropagation();
                  event.preventDefault();
               }
            }
         };
         document.addEventListener('click', gonClick, true);
         var coordinates = [];
         function initFastButtons() {
 new FastButton(document.getElementById("fastclick"), goSomewhere);
         };
         function goSomewhere() {
 var theTarget = document.elementFromPoint(this.startX, this.startY);
 if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;

 var theEvent = document.createEvent('MouseEvents');
 theEvent.initEvent('click', true, true);
 theTarget.dispatchEvent(theEvent);
         };
//========================================================
于 2012-11-20T16:12:45.863 に答える
0

これは私のために働いています。新しいページがDOMに追加されるたびに、すべてのリンクに高速クリックを添付できます...

 // when new pages are loaded into the DOM via JQM AJAX Nav, apply ko bindings to that page's DOM
$(document).on('pageinit', '.ui-page', function (event, data)
{
    var activePage = $(event.target).get(0);
    FastClick.attach(activePage);
});
于 2013-05-30T16:28:31.807 に答える
0

Ben Howdleは最近、この問題にかなりシンプルでエレガントな方法で対処するオープンソースプロジェクトTouche.jsを作成しました。この問題の解決策を探している人は一見の価値があるかもしれません。

于 2013-10-24T14:49:43.660 に答える
0

MikeZの推奨事項に直接コメントを投稿することはできません。

私はそれをうまく使用しましたが、特にAndroidデバイスの場合はさらにtweekを実行する必要がありました。

gonClick（）を呼び出す代わりにevent.preventDefault();、私も呼び出す必要がありましたevent.stopImmediatePropagation();

そうしないと、特に、クリックした要素の上にパネルなどの動的要素を開いたときに、問題が発生する可能性があります。

MikeZソリューションで使用する完全なgonClick（）メソッド：

function gonClick(event) {
    for ( var i = 0; i < coordinates.length; i += 2) {
        var x = coordinates[i];
        var y = coordinates[i + 1];
        if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
            event.stopPropagation();
            event.preventDefault();
            event.stopImmediatePropagation();
        }
    }
};
于 2013-12-25T16:05:46.170 に答える