Почему в данном случае не срабатывает preventDefault()?

Question

Почему в данном случае не срабатывает preventDefault()?

Рейтинг: 0Ответов: 1Опубликовано: 17.01.2023

пробовал разные решения на stack overflow, однако результат одинаковый - перезагрузка страницы. Единственное что помогло, так это навешивание слушателя событий на document.body и вызов preventDefault через него, однако данное решение мне не подходит. Код так же доступен и на codepen

const taskInput = document.querySelector('.create-task-block__input');
const createTaskButton = document.querySelector('.create-task-block');
const taskContainer = document.querySelector('.container');

const tasks = [
    {
        id: '1138465078061',
        completed: false,
        text: 'Посмотреть новый урок',
    },
    {
        id: '1138465078062',
        completed: false,
        text: 'Выполнить тест',
    },
    {
        id: '1138465078063',
        completed: false,
        text: 'Выполнить ДЗ',
    },
];

function showTasks(taskMass) {
    taskMass.forEach(function (item, i) {
        taskContainer.innerHTML += `
        <div class="task-item" data-task-id="${item.id}">
        <div class="task-item__main-container">
          <div class="task-item__main-content">
            <div class="checkbox-form">
              <input class="checkbox-form__checkbox" type="checkbox" id="task-${item.id}">
              <label for="task-${item.id}"></label>
            </div>
            <span class="task-item__text">${item.text}</span>
          </div>
          <button class="task-item__delete-button default-button delete-button" data-delete-task-id="${i}">Удалить</button>
        </div>
      </div>
        `;

    })
}

showTasks(tasks);

createTaskButton.addEventListener('submit', function (e) {
    // e.stopImmediatePropagation();
    e.preventDefault();

    let newTask =
    {
        id: Date.now().toString(),
        completed: false,
        text: taskInput.value,
    }
    console.log(newTask);
    console.log(tasks);

    tasks.push(newTask);
    showTasks(tasks);

});

:root {
    --primary-color: #546792;
    --text-color: #ffffff;
    --delete-button-background: #FF0000;
    --checkbox-checked-background: #546791;
    --checkbox-border-color: #000;
    --checkbox-text-color: #fff;
    --default-border-color: #000;
    --error-color: #FF0000;
    --modal-overlay: rgb(84, 103, 145, 0.6);
}

html {
    font-size: 10px;
    line-height: 10px;
}

body {
    padding: 0;
    margin: 0;
}

#tasks {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 20px;
}

.tasks__wrapper {
    max-width: 70%;
    width: 100%;
}

.tasks__wrapper_hidden {
    display: none;
}

.main-navigation {
    display: flex;
    justify-content: space-evenly;
    background-color: var(--primary-color);
}

.main-navigation__button-item {
    position: relative;
    background-color: var(--primary-color);
    color: var(--text-color);
    padding: 25px;
    text-decoration: none;
    font-size: 2rem;
    line-height: 2.5rem;
}

.main-navigation__button-item_selected {
    box-shadow: inset 0 0 0 4px #fff;
}

.create-task-block {
    position: relative;
}

.create-task-block__input {
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    color: var(--primary-color);
  
    font-size: 2rem;
    line-height: 2.5rem;
    height: 40px;
    width: 50%;
    padding: 0;
    margin-bottom: 40px;
}

.create-task-block__button {
    height: 44px;
}

.create-task-block__button,
.task-item__delete-button {
    cursor: pointer;

    background-color: var(--primary-color);
    color: var(--text-color);
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
  
    font-size: 1.5rem;
    line-height: 2.5rem;
}

.task-item {
    width: 100%;
    font-size: 1.5rem;
    line-height: 2.5rem;
    border-bottom: 2px solid var(--primary-color);
    padding: 10px 0;

    display: flex;
    flex-direction: column;
}

.task-item__main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-item__main-content {
    display: flex;
    align-items: center;
}

.task-item__delete-button {
    transition: 0.2s ease;
}

.task-item__delete-button {
    position: relative;
}

.task-item__delete-button:hover {
    background-color: var(--delete-button-background);
}

.task-item__text {
    font-size: 2rem;
    line-height: 2.5rem;
}

.checkbox-form__checkbox + label {
    display: block;
    margin: 0.2em;
    cursor: pointer;
    padding: 0.2em;
}
  
.checkbox-form__checkbox  {
    display: none;
}
  
.checkbox-form__checkbox + label:before {
    content: "\2714";
    border: 0.1em solid var(--checkbox-border-color);
    border-radius: 0.2em;
    display: inline-block;
    width: 1em;
    height: 1em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.2em;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
}

.checkbox-form__checkbox + label:active:before {
    transform: scale(0);
}

.checkbox-form__checkbox:checked + label:before {
    background-color: var(--checkbox-checked-background);
    border-color: var(--checkbox-checked-background);
    color: var(--checkbox-text-color);
}

.checkbox-form__checkbox:disabled + label:before {
    transform: scale(1);
}

.checkbox-form__checkbox:checked:disabled + label:before {
    transform: scale(1);
    background-color: var(--checkbox-checked-background);
    border-color: var(--checkbox-checked-background);
}

.tooltip {
    position: absolute;
    left: -50%;
    bottom: calc(100% + 5px);
    margin: auto 0;

    background-color: var(--primary-color);
    color: var(--text-color);
    font-size: 1.5rem;
    line-height: 2rem;
    width: 200px;
    border: 2px solid var(--default-border-color);
}

.error-message-block {
    position: absolute;
    left: 0;
    bottom: 0;

    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--error-color);
}

.modal-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--modal-overlay);
    z-index: 1000;
    transition: 0.2s ease;
    opacity: 1;
}

.modal-overlay_hidden {
    top: 100%;
    opacity: 0;
}

.delete-modal {
    position: relative;
    top: 0;
    width: 50%;
    height: fit-content;
    padding: 15px 25px;

    border: 2px solid var(--text-color);
    border-radius: 5px;
    background-color: var(--primary-color);
    transition: 0.3s ease-in;
}

.delete-modal__question {
    font-size: 2rem;
    line-height: 2.5rem;
    color: var(--text-color);
    margin: 0;
    margin-bottom: 30px;
    text-align: center;
}

.delete-modal__buttons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.delete-modal__button {
    cursor: pointer;

    font-size: 2rem;
    line-height: 2.5rem;

    border: 1px solid var(--text-color);
    border-radius: 5px;

    background: none;
    color: var(--text-color);
    padding: 5px 10px;

    transition: 0.3s ease;
}

.delete-modal__button:hover {
    box-shadow: 0 0 0 1px var(--text-color);
}

.delete-modal__confirm-button {
    background-color: var(--delete-button-background);
    border: 1px solid var(--delete-button-background);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css" />
  <title>Работа с DOM</title>
</head>

<body>

  <div class="wrapper">
    <div class="container">
      <form class="create-task-block">
        <input name="taskName" class="create-task-block__input default-text-input" type="text"
          placeholder="Создайте новую задачу" value="я создал задачу">
        <button type="submit" class="create-task-block__button default-button"> Создать </button>
      </form>
    </div>
  </div>


  <script src="index.js"></script>
</body>

</html>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

обработчик навешан на верный элемент и отрабатывает как и ожидается.

Проблема заключается в изменении .innerHTML. При изменении этого свойства, происходит заново создание всей разметки внутри элемента. Соответственно все элементы пересоздаются и если были какие-то обработчики - они пропадают.

Для решения достаточно сделать отдельный контейнер для списка тасков. В котором будет только список, без формы.

В дополнение, перед выводом списка, стоит очистить элемент, чтобы элементы в нем не дублировались.

const taskInput = document.querySelector('.create-task-block__input');
const createTaskButton = document.querySelector('.create-task-block');
const taskContainer = document.querySelector('.task-container');

const tasks = [{
    id: '1138465078061',
    completed: false,
    text: 'Посмотреть новый урок',
  },
  {
    id: '1138465078062',
    completed: false,
    text: 'Выполнить тест',
  },
  {
    id: '1138465078063',
    completed: false,
    text: 'Выполнить ДЗ',
  },
];

function showTasks(taskMass) {
  taskContainer.innerHTML = taskMass.map(function(item, i) {
    return `
        <div class="task-item" data-task-id="${item.id}">
        <div class="task-item__main-container">
          <div class="task-item__main-content">
            <div class="checkbox-form">
              <input class="checkbox-form__checkbox" type="checkbox" id="task-${item.id}">
              <label for="task-${item.id}"></label>
            </div>
            <span class="task-item__text">${item.text}</span>
          </div>
          <button class="task-item__delete-button default-button delete-button" data-delete-task-id="${i}">Удалить</button>
        </div>
      </div>
        `;
  }).join('');
}

showTasks(tasks);

createTaskButton.addEventListener('submit', function(e) {
  e.preventDefault();

  let newTask = {
    id: Date.now().toString(),
    completed: false,
    text: taskInput.value,
  }
  console.log(newTask);
  console.log(tasks);

  tasks.push(newTask);
  showTasks(tasks);

});

:root {
  --primary-color: #546792;
  --text-color: #ffffff;
  --delete-button-background: #FF0000;
  --checkbox-checked-background: #546791;
  --checkbox-border-color: #000;
  --checkbox-text-color: #fff;
  --default-border-color: #000;
  --error-color: #FF0000;
  --modal-overlay: rgb(84, 103, 145, 0.6);
}

html {
  font-size: 10px;
  line-height: 10px;
}

body {
  padding: 0;
  margin: 0;
}

#tasks {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.tasks__wrapper {
  max-width: 70%;
  width: 100%;
}

.tasks__wrapper_hidden {
  display: none;
}

.main-navigation {
  display: flex;
  justify-content: space-evenly;
  background-color: var(--primary-color);
}

.main-navigation__button-item {
  position: relative;
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 25px;
  text-decoration: none;
  font-size: 2rem;
  line-height: 2.5rem;
}

.main-navigation__button-item_selected {
  box-shadow: inset 0 0 0 4px #fff;
}

.create-task-block {
  position: relative;
}

.create-task-block__input {
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  color: var(--primary-color);
  font-size: 2rem;
  line-height: 2.5rem;
  height: 40px;
  width: 50%;
  padding: 0;
  margin-bottom: 40px;
}

.create-task-block__button {
  height: 44px;
}

.create-task-block__button,
.task-item__delete-button {
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 5px 20px;
  border-radius: 5px;
  font-size: 1.5rem;
  line-height: 2.5rem;
}

.task-item {
  width: 100%;
  font-size: 1.5rem;
  line-height: 2.5rem;
  border-bottom: 2px solid var(--primary-color);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}

.task-item__main-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-item__main-content {
  display: flex;
  align-items: center;
}

.task-item__delete-button {
  transition: 0.2s ease;
}

.task-item__delete-button {
  position: relative;
}

.task-item__delete-button:hover {
  background-color: var(--delete-button-background);
}

.task-item__text {
  font-size: 2rem;
  line-height: 2.5rem;
}

.checkbox-form__checkbox+label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

.checkbox-form__checkbox {
  display: none;
}

.checkbox-form__checkbox+label:before {
  content: "\2714";
  border: 0.1em solid var(--checkbox-border-color);
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

.checkbox-form__checkbox+label:active:before {
  transform: scale(0);
}

.checkbox-form__checkbox:checked+label:before {
  background-color: var(--checkbox-checked-background);
  border-color: var(--checkbox-checked-background);
  color: var(--checkbox-text-color);
}

.checkbox-form__checkbox:disabled+label:before {
  transform: scale(1);
}

.checkbox-form__checkbox:checked:disabled+label:before {
  transform: scale(1);
  background-color: var(--checkbox-checked-background);
  border-color: var(--checkbox-checked-background);
}

.tooltip {
  position: absolute;
  left: -50%;
  bottom: calc(100% + 5px);
  margin: auto 0;
  background-color: var(--primary-color);
  color: var(--text-color);
  font-size: 1.5rem;
  line-height: 2rem;
  width: 200px;
  border: 2px solid var(--default-border-color);
}

.error-message-block {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--error-color);
}

.modal-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--modal-overlay);
  z-index: 1000;
  transition: 0.2s ease;
  opacity: 1;
}

.modal-overlay_hidden {
  top: 100%;
  opacity: 0;
}

.delete-modal {
  position: relative;
  top: 0;
  width: 50%;
  height: fit-content;
  padding: 15px 25px;
  border: 2px solid var(--text-color);
  border-radius: 5px;
  background-color: var(--primary-color);
  transition: 0.3s ease-in;
}

.delete-modal__question {
  font-size: 2rem;
  line-height: 2.5rem;
  color: var(--text-color);
  margin: 0;
  margin-bottom: 30px;
  text-align: center;
}

.delete-modal__buttons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.delete-modal__button {
  cursor: pointer;
  font-size: 2rem;
  line-height: 2.5rem;
  border: 1px solid var(--text-color);
  border-radius: 5px;
  background: none;
  color: var(--text-color);
  padding: 5px 10px;
  transition: 0.3s ease;
}

.delete-modal__button:hover {
  box-shadow: 0 0 0 1px var(--text-color);
}

.delete-modal__confirm-button {
  background-color: var(--delete-button-background);
  border: 1px solid var(--delete-button-background);
}

<div class="wrapper">
  <div class="container">
    <form class="create-task-block">
      <input name="taskName" class="create-task-block__input default-text-input" type="text" placeholder="Создайте новую задачу" value="я создал задачу">
      <button type="submit" class="create-task-block__button default-button"> Создать </button>
    </form>
    <div class="task-container"></div>
  </div>
</div>

Почему в данном случае не срабатывает preventDefault()?

Ответы