我试图了解事件对象如何在 .preventDefault() 方法的上下文中工作。现在，例如，如果我在提交事件处理程序上使用 event.preventDefault，它将阻止我触发提交事件。因此，我尝试在提交按钮上使用 event.preventDefault() 的 onclick 事件处理程序，它也不允许我提交表单。从技术上讲，不允许用户单击按钮是不可能的。所以我想确定并知道 event.preventDefault 与事件处理程序到底做了什么。供引用的代码如下。这也让我想到一个问题，在表单中声明但未使用类型提交定义的按钮的自然行为是什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prevent default example</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form>
<div>
<label for="fname">First name: </label>
<input id="fname" type="text">
</div>
<div>
<label for="lname">Last name: </label>
<input id="lname" type="text">
</div>
<div>
<input id="submit" type="submit">
</div>
</form>
<p></p>
<script>
var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');
form.onclick = function(e) {
if(fname.value === '' || lname.value === '') {
e.preventDefault();
para.textContent = 'You need to fill in both names!'
}
}
</script>
</body>
</html>
最佳答案
event.preventDefault 函数阻止浏览器执行 native 行为。
对于提交按钮，它不会将数据提交到服务器并在此过程中重新加载页面，而是将数据处理留给您。
因此，如果您想使用 AJAX 提交表单数据，您可以定义处理数据的方式。
关于javascript - event.preventDefault 如何处理无法停止的事件处理程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47207486/