iOSで CarouFredSel を使った場合、タッチしての遷移がいつのまにかできなくなっていたので

iOSで CarouFredSel を使った場合、タッチしての遷移がいつのまにかできなくなっていたので

CarouFredSel を使っているが、iOS でページを表示した時、タップ動作でリンク遷移ができなくなっていた。 (スワイプでカルーセルを回せる設定をしてある)

なので、エレメントの各要素をタップした際

1. touchstart イベントでタッチ箇所の座標を取得し、記録しておく
2. touchend イベントでタッチ箇所の座標を取得し、記録しておく
3. 両座標間の距離をお求める
4. 10px以下(?) だったら、JSで遷移させる

というような改修をしようと思っていた。

var clickX = null;
var clickY = null;
$('a.touch-link-direct, .touch-link-direct a').each(function () {
var element = $(this);
if (element.attr('href')) {
element.on("touchstart", function (event) {
clickX = event.pageX;
clickY = event.pageY;
});

こんな感じで。

しかし、iOSシミュレータでこのコードを実行してみると、 event.pageX が undefined になる。clientX なんかも同様。 タッチしてると別のプロパティ名になるんだろうか?

よくわからなかったので、touchstart - tauchend の時間差で、 遷移するようにした。

var touchStartTime = null;
$('a.touch-link-direct, .touch-link-direct a').each(function () {
var element = $(this);
if (element.attr('href')) {
element.on("touchstart", function (event) {
touchStartTime = new Date().getTime();
});
    element.on("touchend", function () {
        if (!touchStartTime) {
            return;
        }
        var touchEndTime = new Date().getTime();
        var touchElapsedTime = touchEndTime - touchStartTime;
        touchStartTime = null;
        if (10 < touchElapsedTime && touchElapsedTime < 200)
            location.href = element.attr('href');
        return false;
    });
}

});

iOS だったら、CarouFredSel より FilpSnap.js の方がよさそう