私は iOS 7 でこの問題をデバッグしようとしてきましたが、気が狂いそうです。私は iDangerous Swiper ( http://www.idangero.us/swiper/get-started/ ) を使用しています。スライド内のクリック可能なボタンを使用して、次のスライドに進みます。そのボタンのクリックには AJAX 送信もあります。touchstart イベントを使用して、モバイルでのクリックの信頼性を高めようとしています。これは成功しましたが、iPhone 6 (iOS 7) では、最初のスライドが移動する前にスワイパーがちらつき/サイズ変更されます。私がテストした他のすべてのブラウザでは問題ありません。
デバッグするために、発生するすべてのイベントを数秒遅らせて、setTimeout を使用してどのイベントが原因であるかを確認しました。イベントを遅らせると、ちらつき/サイズ変更は発生しません。
これを引き起こしている原因やデバッグ方法についてのアイデアがありません。
jquery トリガーは次のとおりです。
var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
// make click more reliable on mobile
$(".swiper-slide fieldset.rating > label").bind(clickHandler, function(e) {
setTimeout(function() {
$(this).prev('input').click()
.siblings('input').attr('checked',false)
.end()
.attr('checked', true);
return false;
}, 0); // end timeout
});
// Advance on click
//$('.swiper-slide input:radio[name^="number"]:not(.other_text)').on('click', function(e){
$('.swiper-slide input:radio[name^="number"],a.other_done').on('click', function(e){
//$(this).next('label').html('<i class="ss-icon1 i-smile1satsum-survey"></i>');
setTimeout(function () {
//alert('about to trigger move');
mySwiper.swipeNext();
}, 200);
});
$(document).on('change', 'fieldset.rating', function (event) {
setTimeout(function () {
//alert('about to post data');
console.log('posting data');
val = $(this).children('input:checked').val();
name = $(this).children('input:checked').attr('name');
base_name = name.split("[data]")[0];
id_name = base_name + "[id]";
id = $('input[name="' + id_name + '"]').val();
if (id > 0) {
json_string = "{ \"" + name + "\": \"" + val + "\", \"" + id_name + "\": \"" + id + "\" }";
} else {
json_string = "{ \"" + name + "\": \"" + val + "\" }";
};
json_object = JSON.parse(json_string);
url = $(location).attr('href');
number_url = url.split("/play")[0];
// Change thankyou text
if (base_name == "number[recom]") {
if (val == 5) {
$('.custom_thankyou').removeClass("ty_active");
$('#custom_thankyou_p').addClass("ty_active");
} else if (val == 4) {
$('.custom_thankyou').removeClass("ty_active");
$('#custom_thankyou_n').addClass("ty_active");
} else if (val < 4) {
$('.custom_thankyou').removeClass("ty_active");
$('#custom_thankyou_d').addClass("ty_active");
}
}
$.ajax({
type: "PUT",
url: number_url,
dataType: "json",
data: json_object
//})
//.done(function( msg ) {
//alert( "Data Saved: " + msg );
});
},400); // end settimeout
});
「cursor:pointer」の修正も試みましたが、うまくいきませんでした。誰かアイデアをください!