Конфликтующие события на одном и том же объекте

Question

У меня есть кнопка обновления (на самом деле png-изображение), на которую пользователь может навести курсор мыши, перевернув ее от серого до синего. При щелчке по обновлению изображение меняется на кнопку воспроизведения, которая демонстрирует подобное изменение цвета, за исключением случаев, когда вы нажимаете на изображение воспроизведения, оно должно переключиться обратно на исходное изображение обновления.

Проблема заключается в том, что после нажатия на обновленное изображение, когда я нажимаю на воспроизводимое изображение, не удаляя мышь с изображения, он не возвращается к обновленному изображению.

Я уже рассмотрел остановку распространения событий.

Вот мой код:

$('#refresh').click(function (event) { 
    if (!tMinusZero) { 
     $('#refresh').html("<img src='play_small_hover.png'>"); 
     tMinusZero = true; 
     event.stopImmediatePropagation(); 
    } else { 
     $('#refresh').html("<img src='refresh_small_hover.png'>"); 
     tMinusZero = false;(
     event.stopImmediatePropagation(); 
    } 
}); 

$('#refresh').hover(function() { 
    if (!tMinusZero) { 
     $('#refresh').html("<img src='refresh_small_hover.png'>"); 
    } else { 
     $('#refresh').html("<img src='play_small_hover.png'>"); 
    } 
}, function() { 
    if (!tMinusZero) { 
     $('#refresh').html("<img src='refresh_small.png'>"); 
    } else { 
     $('#refresh').html("<img src='play_small.png'>"); 
    } 
}); 

Некоторые интересные вещи, которые я заметил, при попытке отладки:

• Если переместить мышь через #refresh слишком быстро парения будет «придерживаться», т.е. подразумеваемая мышь не будет срабатывать.
• Комментирование кода наведения устраняет проблему с нажатием кнопки.
• Оставляя код наведения, если я нажимаю внешний вид изображения, но внутри div, не удаляя мышь из div, исправляет проблему щелчка.
• Удаление мышью из div перед повторным щелчком устраняет проблему с нажатием кнопки.
• После щелчка по изображению изображение, которое оно изменит, будет мерцать между изображением наведения и не-hover, если я надвигаю его на мышь, но не если я сначала удалю мою мышь из div.
• Когда у меня возникает проблема с нажатием кнопки, изображение с нарушением будет мгновенно мерцать, как если бы оно переключилось на одно из изображений, отличных от наведения, а затем быстро изменилось на оскорбительное изображение.

Мне кажется, что мои два обработчика событий имеют противоречивые интересы, но прекращение распространения событий, похоже, не помогает.

Answer 1

Почему бы вам не попробовать решить проблему с помощью CSS, я думаю, что это будет более элегантно, сделать небольшой DIV, с фоном, соответствующим вашему изображению, определить состояние зависания и активное состояние, а также небольшой скрипт для переключения между 2 более дополнительными состояниями

Что-то вроде: CSS:

#refresh[data-state=notclicked] 
{ 
background-image:url('play_small.png'); 
cursor:pointer; 
} 
#refresh[data-state=notclicked]:hover 
{ 
background-image:url('play_small_hover.png'); 
cursor:pointer; 
} 
#refresh[data-state=clicked] 
{ 
background-image:url('refresh_small.png'); 
cursor:pointer; 
} 
#refresh[data-state=clicked]:hover 
{ 
background-image:url('refresh_small_hover.png'); 
cursor:pointer; 
} 

конечно, вы должны определить ширину и высоту в CSS, для фиксированного width.height, который соответствует вашему png размер.

чем в ЯШ:

$("#refresh").click(function(){ 
if ($(this).attr('data-state')=='clicked') {$(this).attr('data-state','notclicked');} 
else {$(this).attr('data-state','clicked');} 
}); 

Answer 2

Если я правильно понимаю, как вы хотите, чтобы он себя вел, ваш код работает нормально, даже если в событии click (круглый кронштейн) есть опечатка.

tMinusZero = false;(

Кроме того, только для улучшения кода вы можете заменить

$('#refresh') 

с

$(this) 

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