Я пытаюсь изменить код jquery для раскрывающегося меню на веб-сайте. В частности, я работаю над обходным путем для преждевременного события touchcancel, запускаемого в сборке браузера Android 4.4.2 Samsung Galaxy S4.
Вот код, с которым я пытаюсь работать:
jQuery(document).ready(function ($) {
'use strict';
$('.taptap-by-bonfire ul li ul').before($('<span><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><polygon id="arrow-24-icon" points="206.422,462 134.559,390.477 268.395,256 134.559,121.521 206.422,50 411.441,256 "/></svg></span>'));
$(".menu > li > span, .sub-menu > li > span").on('touchstart click', function(e) {
e.preventDefault();
if (false == $(this).next().is(':visible')) {
$(this).parent().siblings().find(".sub-menu").slideUp(300);
$(this).siblings().find(".sub-menu").slideUp(300);
$(this).parent().siblings().find("span").removeClass("taptap-submenu-active");
}
$(this).next().slideToggle(300);
$(this).toggleClass("taptap-submenu-active");
})
$(".menu > li > span").on('touchstart click', function(e) {
e.preventDefault();
if($(".sub-menu > li > span").hasClass('taptap-submenu-active'))
{
$(".sub-menu > li > span").removeClass("taptap-submenu-active");
}
})
$(".taptap-menu-button-wrapper").on('touchstart click', function(e) {
if($(".menu > li > span, .sub-menu > li > span").hasClass('taptap-submenu-active'))
{
$(".menu > li").find(".sub-menu").slideUp(300);
$(".menu > li > span, .sub-menu > li > span").removeClass("taptap-submenu-active");
}
})
});
Он хорошо работает на большинстве устройств и в большинстве браузеров. Только в этом конкретном браузере Android меню выпадает и снова быстро перемещается вверх. Я предполагаю, что происходит преждевременное событие touchcancel. Я пробовал разные вещи, но мне кажется, что у меня нет всех этих элементов и на этом устройстве не срабатывает touchcancel, что бы я ни пытался.
Что я могу сделать, чтобы обойти эту проблему с помощью браузера Android?
