When Using CarouFredSel on iOS, the Touch Transition Stopped Working Unexpectedly
iOS
2015-08-11 07:05 (10 years ago)

<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 < touchElapsedTime && touchElapsedTime < 200)
location.href = element.attr('href');
return false;
});
}
});
</pre>
<p>For iOS, FilpSnap.js seems better than CarouFredSel.</p>
</div>
Please rate this article (No signup or login required)
Currently unrated
The author runs the application development company Cyberneura.
We look forward to discussing your development needs.
We look forward to discussing your development needs.