web-dev-qa-db-ja.com

iPadのタッチエンドで2回呼び出されたクリックイベント

スライドにjqueryanimateを使用しています。スライドの最後に矢印があり、その矢印にクリックイベントがあります。それの働きは、クリックするとシルド内の1つのアイテムを移動し、マウスダウンするとシルド全体を移動することです。これはデスクトップでは正常に機能しますが、iPadではクリックすると一度に2つのアイテムがスライド内に表示されます。 iPadでクリックイベントが2回呼び出される理由がわかりません。クリックのサンプルコードは次のとおりです。

_    $('#next_item').bind('mousedown touchstart MozTouchDown',function(e) {                    
        $('.slide').animate({left:left},6000);   
    });

    $('#next_item').bind('mouseup touchend MozTouchRelease',function(e) {   
        No.nextItem();          
    });
_

_#next_item_は、スライドの最後にある矢印のIDです。 unbindtouchstartおよびtouchendイベントを試行しましたが、バインド解除のためにスライドスクロール中に、単一のアイテムの後にアイテムがスライド内に表示されません。 No.nextItem()はスライド内の1つのアイテムを移動します。 $('.slide')のleftは、スライドを左に移動します。これが起こっている理由とipadのこの問題を解決する方法を見つけるのを手伝ってください。

jqueryipadclicktouch
17
user850234

iPadはtouchstart/-endとmousestart/-endの両方を理解します。

このように解雇されます：

┌─────────────────────┬──────────────────────┬─────────────────────────┐
│Finger enters tablet │ Finger leaves tablet │ Small delay after leave │
├─────────────────────┼──────────────────────┼─────────────────────────┤
│touchstart           │ touchend             │ mousedown               │
│                     │                      │ mouseup                 │
└─────────────────────┴──────────────────────┴─────────────────────────┘

ユーザーがタブレットを使用しているかどうかを検出してから、タッチスタートを中継する必要があります...：

/********************************************************************************
* 
* Dont sniff UA for device. Use feature checks instead: ('touchstart' in document) 
*   The problem with this is that computers, with touch screen, will only trigger 
*   the touch-event, when the screen is clicked. Not when the mouse is clicked.
* 
********************************************************************************/
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
var myDown = isIOS ? "touchstart" : "mousedown";
var myUp = isIOS ? "touchend" : "mouseup";

次に、次のようにバインドします。

$('#next_item').bind(myDown, function(e) {

それを処理するイベントを作成することもできます。以下を参照してください。

http://benalman.com/news/2010/03/jquery-special-events/

基本的な正規化されたダウンイベント：

$.event.special.myDown = {
    setup: function() {
        var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
        var myDown = isIOS ? "touchstart" : "mousedown";
        $(this).bind(myDown + ".myDownEvent", function(event) {
            event.type = "myDown";
            $.event.handle.call(this, event);
        });
    },
    teardown: function() {
        $(this).unbind(".myDownEvent");
    }
};

JQuery 1.9.0 $.event.handleの名前を$.event.dispatchに変更した後、両方をサポートするには、次のフォールバックを使用して記述できます。

// http://stackoverflow.com/questions/15653917/jquery-1-9-1-event-handle-apply-alternative
// ($.event.dispatch||$.event.handle).call(this, event);
$.event.special.myDown = {
    setup: function() {
        var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
        var myDown = isIOS ? "touchstart" : "mousedown";
        $(this).bind(myDown + ".myDownEvent", function(event) {
            event.type = "myDown";
            ($.event.dispatch||$.event.handle).call(this, event);
        });
    },
    teardown: function() {
        $(this).unbind(".myDownEvent");
    }
};
41
andlrc

IPad/iPod用のUAスニファーの使用には注意してください。あなたはそのような解決策ですべてのAndroidデバイスを捨てています！より良い解決策はタッチサポートを検出することです、それはすべてのモバイル/タブレットデバイスで動作します：

var isTouchSupported = "ontouchend" in document;
22
H Dog

H犬の答えを拡張します。これが私のために働いたコードです。

 if (isTouchSupported) {
    $('#playanimationbtn').off("mouseup");
    $('#stopanimationbtn').off("mouseup");
    $('#playanimationbtn').off("mousedown");
    $('#stopanimationbtn').off("mousedown");
    $('#playanimationbtn').off("click");
    $('#stopanimationbtn').off("click");
    document.getElementById("playanimationbtn").addEventListener("touchend", PlayAnimation);
    document.getElementById("stopanimationbtn").addEventListener("touchend", StopAnimation);
} else {
    $('#playanimationbtn').off("touchstart");
    $('#playanimationbtn').off("touchend");
    $('#playanimationbtn').off("touchmove");
    $('#playanimationbtn').off("touchend");
    $('#playanimationbtn').off("touchleave");
    $('#stopanimationbtn').off("touchstart");
    $('#stopanimationbtn').off("touchend");
    $('#stopanimationbtn').off("touchmove");
    $('#stopanimationbtn').off("touchend");
    $('#stopanimationbtn').off("touchleave");
    document.getElementById("playanimationbtn").addEventListener("click", PlayAnimation);
    document.getElementById("stopanimationbtn").addEventListener("click", StopAnimation);
}
0
saadat ali