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

投稿者: ytyng 8 年, 7 ヶ月 前

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 の方がよさそう

現在未評価

コメント

アーカイブ

2024
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2012
2011