Как сопоставить hover с touchstart?

Question

[Дмитрий]

Здравствуйте. На сайте есть менюшка с выплывающими дочерними подменюшками при наведении (hover) на основную менюшку. всплывание сделано так:

$('.menu-fallback').hover(function () {
        $(this).find('.fallback').stop().slideDown('fast')
        $(this).addClass('active');
    }, function () {
        $(this).find('.fallback').stop().slideUp('fast');
        $(this).removeClass('active');
    });

Сайт не адаптирован под мобильное меню, и при тапе на главный пункт, естественно, сразу происходит переход на выбранный пункт. Я попытался это изменить:

$('.menu-fallback').hover(function () {
        if ($(this).hasClass('active')){
            //Если уже выделено
        }
        else{
            // Если нету класса active
            $(this).find('>a').click(function(e){
                e.preventDefault();
            });
        }
        $(this).find('.fallback').stop().slideDown('fast')
        $(this).addClass('active');
    }, function () {
        $(this).find('.fallback').stop().slideUp('fast');
        $(this).removeClass('active');
    });

Что привело к тому, что родительские ссылки теперь вообще не отрабатывают. событие перехода блокируется.
Как это исправить? Или может быть есть какой то способ легко связать функцию hover с touchstart ?

Answer 1

[Eugene Tatarinov]

Воспользуйтесь:

function is_touch_device() {
    return !!('ontouchstart' in window);
}

и в случае, если функция вернет true, замените hover на click.

Comments

[Дмитрий]

Не помогает. При тапах срабатывает всё равно hover. Вот код

[CODE]function is_touch_device() {
return !!('ontouchstart' in window);
}
if (is_touch_device == true){
$('.menu-fallback').click(function () {
console.log('клик на таче!');
$(this).find('.fallback').stop().slideDown('fast')
$(this).addClass('active');
}, function () {
$(this).find('.fallback').stop().slideUp('fast');
$(this).removeClass('active');
});
}
else{
$('.menu-fallback').hover(function () {
console.log('ховер мыши!');
$(this).find('.fallback').stop().slideDown('fast')
$(this).addClass('active');
}, function () {
$(this).find('.fallback').stop().slideUp('fast');
$(this).removeClass('active');
});
}[/CODE]

Answer 2

[Дмитрий]

Помог совет Евгения, но допёр как всё сделать, я не сразу. В итоге получился вот такой код:

// Проверка на тач девайсы
    function is_touch_device() {
        return !!('ontouchstart' in window);
    }
    if (is_touch_device() == true){
        // Функция меню для тач девайсов
        $('.menu-fallback').on('touchstart click', function(e) {
            // Если нету класса active
            if (!$(this).hasClass('active')){
                // Если у пункта есть подменю, отключить ссылку
                if ($(this).children().is('.fallback')){
                    e.preventDefault();
                }
                // Если есть другие активные пункты, отключаем их
                $('.menu-fallback.active').each(function () {
                    $(this).find('.fallback').stop().slideUp('fast');
                    $(this).removeClass('active');
                });
                // Делаем активным текущий пункт
                $(this).find('.fallback').stop().slideDown('fast');
                $(this).addClass('active');
            }
        });
    }
    // для мыши
    else{
        $('.menu-fallback').hover(function () {
            $(this).find('.fallback').stop().slideDown('fast')
            $(this).addClass('active');
        }, function () {
            $(this).find('.fallback').stop().slideUp('fast');
            $(this).removeClass('active');
        });
    }