Q:

Отмена события при обратном щелчке мыши

При наведении указателя мыши объект появляется, при отведении указателя мыши объект удаляется. Применил функцию off чтобы, при нажатии объект не удалялся при отведении мыши. Как сделать чтобы при обратном щелчке вновь объект удалился и работал как прежде? https://jsfiddle.net/zb9q7e8b/2/

  $('h2').next().hide();

  $('h2').mouseover(function() {
    var $anse = $(this).next();
    $anse.show();
  });
  $('h2').mouseout(function() {
    var $anse = $(this).next();
    $anse.hide();
  });
  $('h2').click(function() {
    var $anse = $(this).next();
    $(this).off('mouseout');
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>

A:

Можно сделать через добавление-удаление класса offed, если класса нет, то добавляем его и применяем off(), а если класс есть, то удаляем его и добавляем событие mouseout():

var titles = $('h2');

titles.next('div').hide();

titles.mouseover(function() {
  $(this).next('div').show();
});

titles.mouseout(function() {
  $(this).next('div').hide();
});

titles.click(function() {
  if (!$(this).hasClass('offed')) {
    $(this).off('mouseout').addClass('offed');
  } else {
    $(this).mouseout(function() {
      $(this).next('div').hide();
    });
    $(this).removeClass('offed');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>
<h2>123</h2>
<div>333</div>

