e.preventDefault() 不适用于 JavaScript 中的提交事件

发布于 2025-01-14 17:19:08 字数 1744 浏览 4 评论 0原文

我的提交事件似乎有问题，每当我按 Enter 或单击提交时，它就会不断刷新。指向网站的链接，您可以在其中查看问题。我正在使用 PreventDefault();停止刷新的函数，如果事件列表器类型是单击但在提交事件上不起作用，则该函数有效。文件链接。

HTML

<body>
<header>
  <h1>My TODO List</h1>
</header>

<form>
  <input type="text" class="todo-input" />
  <button class="todo-button" type="submit">
    <i class="bi bi-plus-square-fill"></i>
  </button>
</form>

<div class="todo-wrapper">
    <ul class="todo-list">
        <div class="todo"></div>
    </ul>
</div>

<script src="sandbox.js"></script>

JavaScript

const todoInput = document.querySelector('.todo-input');

const todoButton = document.querySelector('.todo-button');

const todoList = document.querySelector('.todo-list');

todoButton.addEventListener('submit', e => {
e.preventDefault();

const todoDiv = document.createElement('div');
todoDiv.classList.add('todo-items');
const newTask = document.createElement('li');
newTask.textContent ='Test';
newTask.classList.add('task');
todoDiv.appendChild(newTask);

const finishButton = document.createElement('button')
finishButton.innerHTML = '<i class="bi bi-check2"></i>';
finishButton.classList.add('finish-button');
todoDiv.appendChild(finishButton);

const deleteButton = document.createElement('button')
deleteButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
deleteButton.classList.add('delete-button');
todoDiv.appendChild(deleteButton);

});

原文

I seem to have a problem with submit event, it keeps refreshing whenever I press enter, or click submit. Link to the site where you can see the problem.
I am using preventDefault(); function to stop the refresh which works if the event lister type is click but doesn't on submit event.
Link to the files.

HTML

<body>
<header>
  <h1>My TODO List</h1>
</header>

<form>
  <input type="text" class="todo-input" />
  <button class="todo-button" type="submit">
    <i class="bi bi-plus-square-fill"></i>
  </button>
</form>

<div class="todo-wrapper">
    <ul class="todo-list">
        <div class="todo"></div>
    </ul>
</div>

<script src="sandbox.js"></script>

JavaScript

const todoInput = document.querySelector('.todo-input');

const todoButton = document.querySelector('.todo-button');

const todoList = document.querySelector('.todo-list');

todoButton.addEventListener('submit', e => {
e.preventDefault();

const todoDiv = document.createElement('div');
todoDiv.classList.add('todo-items');
const newTask = document.createElement('li');
newTask.textContent ='Test';
newTask.classList.add('task');
todoDiv.appendChild(newTask);

const finishButton = document.createElement('button')
finishButton.innerHTML = '<i class="bi bi-check2"></i>';
finishButton.classList.add('finish-button');
todoDiv.appendChild(finishButton);

const deleteButton = document.createElement('button')
deleteButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
deleteButton.classList.add('delete-button');
todoDiv.appendChild(deleteButton);

});

分享到QQ

分享到微博