Здравствуйте.
Подскажите пожалуйста, как правильно написать код, чтобы не было конфликта между событиями .hover и .click на одном элементе.
На десктопной версии используется событие .hover, а на мобильных девайсах .click.
Первая проблема:
Ховер срабатывает по классу которого нет.
Изначально присваивается класс ('as-item-hover') на котором есть событие .hover, и при определенных условиях он снимается.
Вторая проблема:
Событие .click присваивает тот же класс, что и событие .hover .
при клике не присваивается класс, из-за того что срабатывает ховер.
function aboutSteps(){
var wNowWidth = $(window).width();
if(wNowWidth >= 940){
$(".as-item").addClass('as-item-hover');
}
else{
$('.as-item-hover').removeClass('as-item-hover');
}
$(".as-item-hover").stop(true,true).hover(
function(){
$(this).addClass('as-item-focus');
},function(){
$(this).removeClass('as-item-focus');
}
);
$(".as-item").click(function(){
if(wNowWidth <= 939){
if($(this).hasClass('as-item-focus')){
$(this).removeClass('as-item-focus');
}
else{
$('.as-item-focus').removeClass('as-item-focus');
$(this).addClass('as-item-focus');
}
}
return false
});
}
