iOSで CarouFredSel を使った場合、タッチしての遷移がいつのまにかできなくなっていたので
2015-08-11 16:05 (9年前)
ytyng
iOSで CarouFredSel を使った場合、タッチしての遷移がいつのまにかできなくなっていたので
CarouFredSel を使っているが、iOS でページを表示した時、タップ動作でリンク遷移ができなくなっていた。 (スワイプでカルーセルを回せる設定をしてある)
なので、エレメントの各要素をタップした際
- touchstart イベントでタッチ箇所の座標を取得し、記録しておく
- touchend イベントでタッチ箇所の座標を取得し、記録しておく
- 両座標間の距離をお求める
- 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 の方がよさそう
コメント