Блог

Рассмотрим этот код. Я не могу понять, почему он ведет себя так, как ведет. Все, что мне нужно, это значок воспроизведения, чередующийся со значком паузы каждый раз, когда я нажимаю в любом месте внутри <td> . Он ведет себя так, как ожидалось, когда я нажимаю внутри <td> , но за пределами самого значка. Однако, если я нажму на сам значок, в первый раз он ведет себя нормально, а затем останавливается.

‘Ionicon заключен в <a> тег, который является дочерним элементом <td> элемента. Прослушиватель событий включен <td> , так в чем может быть проблема?

Спасибо.

Как сказал @Vijai, ваша проблема с событием наведения.. И хотя я мало что знаю о вашем проекте, и вам действительно нужно .empty() при наведении курсора мыши или вам просто нужен hide() значок.. Вы можете попробовать эту часть кода вместо своей

 var hovOn = function(event) {
  if($(this).find('a').length < 1){
    $(this).html(playButtonTemplate);
  }else{
    $(this).find('a').show();
  }   
};
var hovOff = function(event) {
  $(this).find('a').hide();
}
  

Codepen здесь

Хорошо, разобрался. Это похоже на артефакт, который возникает в результате создания элемента из шаблона, и способ mouseenter его реализации.

Проблема в том, что mouseenter событие ( hoverOn часть .hover() ) срабатывает, когда этого не должно быть. Каждый раз, когда новый ionicon создается из шаблона, он запускает mouseenter событие, если курсор немного перемещается.

Логически mouseenter не должно запускаться при появлении элемента, потому mouseenter что должно запускаться при наведении курсора на элемент-слушатель или его потомок, а затем вызываться только тогда, когда курсор покидает все элементы, связанные с событием, а затем снова вводится. Я думаю, что это артефакт создания элемента из подобного шаблона. Может быть, это потому, что DOM обновляется, и он отбрасывает тот факт, что курсор уже находится внутри элемента. Так mouseenter что запускает снова и, в свою очередь, запускает создание нового значка воспроизведения. Затем это повторяется..

Этот codepen должен хорошо это объяснить. При наведении курсора мыши на кнопку воспроизведения mouseenter счетчик будет увеличиваться при каждом, даже небольшом, перемещении мыши, потому что при каждом перемещении мыши создается новая кнопка воспроизведения. Если вы удалите строку, которая создает новую кнопку воспроизведения, она будет вести себя так, как и должен mouseenter, срабатывая только при вводе курсора в элемент.

Когда вы нажимаете на <a> тег, кажется, что он также запускает родительское <td> событие наведения. Как только решение будет найдено, попробуйте приведенный ниже код для наведения курсора мыши.

 var hovOn = function(event) {
      if(playOrPause==='play') {

    $(this).html(pauseButtonTemplate);
    playOrPause = 'pause';
  } else {
    $(this).html(playButtonTemplate);
    playOrPause = 'play';
  }
};