AleksandrAndHABR
@AleksandrAndHABR
Frontend Developer

Событие .hover и .click на одном элементе, конфликт. Как избавиться от конфликта?

Здравствуйте.
Подскажите пожалуйста, как правильно написать код, чтобы не было конфликта между событиями .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
	});
}
  • Вопрос задан
  • 2511 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы