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

(Comments)

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

Currently unrated

Comments

Recent Tweets

  • ytyng

    ytyng @ytyng

    apple developer の、テスト用デバイスのUDIDを1年ごとにチェックして、古い端末を消しちゃうやつ チェックボックスを入れたのを残すのか、消すのかの判断まちがって、全部のUDID消えたわ
    2 months, 2 weeks ago

  • ytyng

    ytyng @ytyng

    うちの会社 TORICO の 代表が今TV出てます #漫画全巻ドットコム #激レアさんを連れてきた
    2 months, 3 weeks ago

  • ytyng

    ytyng @ytyng

    Proofpoint にブロックされているIPアドレスからでも icloud など Apple メールアドレスにメール送信されてもブロックされてない…?
    3 months, 2 weeks ago

Recent Posts

Archive

2020
2019
2018
2017
2016
2015
2014
2013
2012
2011

Categories

Authors

Feeds

RSS / Atom