Как вкл/выкл отслеживание события если сработало другое?

#javascript #jquery

Вот мой пример, как отменить mouseover если кнопку мыши отпустили?



var mouseOverEventListener;
$('#pixel_canvas').mousedown(function () {
  mouseOverEventListener = $('#pixel_canvas').on('mouseover', 'td', function () {
    $( this ).css('background-color', 'red');
  });
});

$('#pixel_canvas').mouseup(function () {
  $('#pixel_canvas').off('mouseover', mouseOverEventListener)
});
tr {
    height: 15px;
}

td {
    width: 15px;
}
tr:nth-child(odd) td:nth-child(odd),
tr:nth-child(even) td:nth-child(even) {
  background-color: #eaeaea;
}





    

Ответы

Ответ 1

"Event preventDefault" - Метод объекта  позволяет предотвратить выполнение стандартного
действия.

Mousedown - Событие срабатывает, когда кнопка нажата над элементом.

Mouseup - Событие срабатывает, когда кнопка мыши отпущена над элементом.

Mouseover - Событие срабатывает, когда мышь появилась над элементом.

Off - Удаляет обработчики событий, назначенные методом ".on"



 $('#pixel_canvas').mousedown(
    function(e) { 
     e.preventDefault();
        $('#pixel_canvas').on('mouseover', 'td', function () {
          $( this ).css('background-color', 'red');
        });           
    }).mouseup(function(){ 
      $('#pixel_canvas').off('mouseover' )

});          
 
tr {
    height: 15px;
}

td {
    width: 15px;
}
tr:nth-child(odd) td:nth-child(odd),
tr:nth-child(even) td:nth-child(even) {
  background-color: #eaeaea;
}




Ответ 2

Вам надо сделать, что то вроде
`$('#pixel_canvas').mousedown(function () {
  $('#pixel_canvas').on('mouseover', 'td', function () {
    $( this ).css('background-color', 'red');
  });
});
$('#pixel_canvas').mouseup(function () { // код }
`


И в mouseup уже реализовать логику удаление эвента методом .off() https://api.jquery.com/off/


Ответ 3

Используйте .off метод jquery для отключения слушателя от события:



var mouseOverEventListener;
$('#pixel_canvas').mousedown(function () {
  mouseOverEventListener = $('#pixel_canvas').on('mouseover', 'td', function () {
    $( this ).css('background-color', 'red');
  });
});

$('#pixel_canvas').mouseup(function () {
  $('#pixel_canvas').off('mouseover', mouseOverEventListener)
}