Как можно отменить (или отменить выполнение) событие только для определенного элемента?

Как избежать выполнения события "onBlur" при клике на кнопку "save" в режиме редактирования, используя "event.stopPropagation()"?
  • 17 сентября 2023 г. 14:57
Ответы на вопрос 3
Чтобы отменить выполнение события только для определенного элемента, можно использовать метод `event.stopPropagation()`. Этот метод предотвращает дальнейшее распространение события по DOM-дереву, останавливая его на текущем элементе.

Чтобы избежать выполнения события "onBlur" при клике на кнопку "save" в режиме редактирования, можно добавить обработчик события "onclick" на кнопку "save" и вызвать метод `event.stopPropagation()` внутри этого обработчика. Например:

```javascript
const saveButton = document.getElementById('save');

// Обработчик клика на кнопку "save"
saveButton.addEventListener('click', function(event) {
  // Отменяем распространение события клика на кнопку "save"
  event.stopPropagation();

  // Далее выполните код, необходимый при сохранении данных
});

const inputElement = document.getElementById('input');

// Обработчик потери фокуса для input элемента
inputElement.addEventListener('blur', function(event) {
  // Проверяем, находится ли кнопка "save" в режиме редактирования
  if (!saveButton.classList.contains('editing')) {
    // Выполняем нужные действия при потере фокуса input элементом
  }
});
```

В данном примере, если кнопка "save" имеет класс "editing", то обработчик потери фокуса для input элемента не будет выполняться благодаря вызову `event.stopPropagation()`. Однако, если класс "editing" отсутствует, обработчик потери фокуса будет запускаться как обычно.
Save 
 Замените `button onClick` на `onMouseDown`
Похожие вопросы