Страницы

Поиск по вопросам

среда, 4 марта 2020 г.

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

#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) }

Комментариев нет:

Отправить комментарий