When Using CarouFredSel on iOS, the Touch Transition Stopped Working Unexpectedly

iOS
2015-08-11 16:05 (8 years ago) ytyng
<div class="document">

<p>When using CarouFredSel on iOS, I noticed that transitioning by touch had somehow stopped working.</p>
<p>I'm using CarouFredSel, but when displaying a page on iOS, link transitions via tap stopped working.
(The carousel is set to rotate by swiping)</p>
<p>Therefore, when tapping each element:</p>
<ol class="arabic simple">
<li>Obtain and record the coordinates of the touch location with the touchstart event</li>
<li>Obtain and record the coordinates of the touch location with the touchend event</li>
<li>Calculate the distance between both coordinates</li>
<li>If it’s 10px or less (?), transition with JS</li>
</ol>
<p>I was thinking of making modifications like this.</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>Something like this.</p>
<p>However, when running this code on the iOS simulator, event.pageX becomes undefined. The same goes for clientX.
I wonder if it becomes a different property name when touched?</p>
<p>I didn't quite understand it, so I decided to make it transition based on the time difference between touchstart and touchend.</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>For iOS, FilpSnap.js seems better than CarouFredSel.</p>
</div>
Currently unrated

Comments

Archive

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