---
slug: "iOSでCarouFredSelを使った場合、タッチしての遷移がいつのまにかできなくなっていたので"
title: "iOSで CarouFredSel を使った場合、タッチしての遷移がいつのまにかできなくなっていたので"
description: "\n\n\niOSで CarouFredSel を使った場合、タッチしての遷移がいつのまにかできなくなっていたので"
url: "https://www.ytyng.com/blog/iOSでCarouFredSelを使った場合、タッチしての遷移がいつのまにかできなくなっていたので"
publish_date: "2015-08-11T07:05:18Z"
created: "2015-08-11T07:05:18Z"
updated: "2026-02-27T10:44:42.244Z"
categories: ["iOS"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20230812/3c5c3fd6b7ba478a89785bea56180fa3.png.webp?width=768"
has_video: false
has_music: false
video_urls: []
music_urls: []
lang: "ja"
---

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

<div class="document">


<p>iOSで CarouFredSel を使った場合、タッチしての遷移がいつのまにかできなくなっていたので</p>
<p>CarouFredSel を使っているが、iOS でページを表示した時、タップ動作でリンク遷移ができなくなっていた。
(スワイプでカルーセルを回せる設定をしてある)</p>
<p>なので、エレメントの各要素をタップした際</p>
<ol class="arabic simple">
<li>touchstart イベントでタッチ箇所の座標を取得し、記録しておく</li>
<li>touchend イベントでタッチ箇所の座標を取得し、記録しておく</li>
<li>両座標間の距離をお求める</li>
<li>10px以下(?) だったら、JSで遷移させる</li>
</ol>
<p>というような改修をしようと思っていた。</p>
<pre class="literal-block">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;
        });
</pre>
<p>こんな感じで。</p>
<p>しかし、iOSシミュレータでこのコードを実行してみると、 event.pageX が undefined になる。clientX なんかも同様。
タッチしてると別のプロパティ名になるんだろうか?</p>
<p>よくわからなかったので、touchstart - tauchend の時間差で、
遷移するようにした。</p>
<pre class="literal-block">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 &lt; touchElapsedTime &amp;&amp; touchElapsedTime &lt; 200)
                location.href = element.attr('href');
            return false;
        });
    }
});
</pre>
<p>iOS だったら、CarouFredSel より FilpSnap.js の方がよさそう</p>
</div>