Работа с mouseenter и mouseleave

232

07 февраля 2019, 14:20

Есть проблема. ВОт код:

$(document).ready(function(){
  let src = '';
  $('.leave').mouseover(function(){
    src = $(this).children('img').attr('src').slice(0,-4) + '_red.svg';
    $(this).children('img').attr('src',src);
  });
  $('.leave').mouseout(function(){
    src = $(this).children('img').attr('src').slice(0,-8) + '.svg';
    $(this).children('img').attr('src',src);
  });
 });

Суть в чем, мне необходимо, чтобы при нажатии на элемент у него сохранялся src как при наведении, и наведение не срабатывало на этом элементе. А у меня получается так, что когда я удаляю класс leave, то события все равно срабатываю на элементе.

Answer 1

Альтернативой использования .mouseover(), .mouseout() и отключения обработчиков при помощи .off, есть использование метода .on().

Который позволяет при написании скрипта не следить за наличием класса у элемента.

Пример кода

$(document).ready(function() { 
  function onMouseover(e) { 
    $(e.currentTarget).css('background', '#000'); 
  } 
 
  function onMouseout(e) { 
    $(e.currentTarget).css('background', '#fff'); 
  } 
 
  $(document).on("mouseover", ".leave", onMouseover); 
  $(document).on("mouseout", ".leave", onMouseout); 
   
  $('.remove-class').click(function() { 
    $('.leave').removeClass('leave'); 
  }); 
});

.box { 
  width: 50px; 
  height: 50px; 
  border: 1px solid #000; 
  display: inline-block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="wrapper"> 
  <div class="box leave"></div> 
  <div class="box leave"></div> 
  <div class="box leave"></div> 
</div> 
<button class="remove-class">Удалить класс</button>