如何将“按键”与“单击鼠标”事件分开以防止按键时提交？

Question

我有“筹码”表单链接，您可以在此处的附加图像中看到，我想创建一个条件，例如如果有人按“Enter”，他可以记下添加的项目，但这里发生的是表单将数据发送到后端。

我多次尝试使用“事件”来修改行为，但没有成功，您可以看到我坚持的方法：

方法1：

// input to submit job
const submit_job = document.getElementById("submit-job");
submit_job.onclick = (e) => {
    e.preventDefault();
    if (e.key !== "") {
        console.log(e.currentTarget)
    } else if (e.pointerType === "mouse") {
        submit_job.onsubmit = () => {
            return true
        }
    }
}

// 这种方法行不通，因为我发现“e.key”只有在使用键盘输入时才有效

方法二：

function getEventType(event) {
    if (event.type === "keydown") {
        event.preventDefault();
    }
}

submit_job.addEventListener('keydown', getEventType, true);

submit_job.addEventListener('click', getEventType);

那么，请在这个问题上提供任何帮助吗？

笔记：

无需查看完整代码，因为代码工作正常，但是当我将其放入表单时，会出现此问题，您可以在答案中仅使用该变量“submit_job”来激励我。

Answer 1

您对表单提交的实现似乎不是一个好主意。 您不应阻止用户在按“Enter”时提交 from。 单击“Enter”应该会触发大多数表单常见的表单提交。 为什么不在输入字段旁边添加一个独特的按钮，单击该按钮允许用户输入注释或文本？ 如果您采用当前的方法，用户将只能通过单击提交按钮来提交，这是一种不好的做法。 我建议创建一个额外的按钮并向该按钮添加一个事件处理程序，这样您就有一个在单击时添加注释的按钮，因此按“Enter”不会与您尝试完成的操作发生冲突。