event.preventDefault 如何在无法停止的事件处理程序上工作?
Posted
技术标签:
【中文标题】event.preventDefault 如何在无法停止的事件处理程序上工作?【英文标题】:How does event.preventDefault work on event handlers that cannot be stopped? 【发布时间】:2018-04-22 18:43:06 【问题描述】:我试图了解事件对象在 .preventDefault() 方法的上下文中是如何工作的。现在,例如,如果我在 on submit 事件处理程序上使用 event.preventDefault,它将阻止我触发 submit 事件。所以我尝试在带有 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>
【问题讨论】:
developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault How exactly does event.preventDefault() affect the DOM?的可能重复 【参考方案1】:event.preventDefault 函数阻止浏览器执行本机行为。
在提交按钮的情况下,它不会将数据提交到服务器并在此过程中重新加载页面,而是将数据处理留给您。
因此,如果您想使用 AJAX 提交表单数据,您可以定义处理数据的方式。
【讨论】:
在表单中声明但未使用提交类型定义的按钮呢?是否存在“提交”的自然行为? 如果在表单中定义了提交按钮,那么它将始终尝试将表单中的数据提交到服务器。如果没有定义路径,那么它将提交给页面本身。如果您只是在表单中定义一个按钮,那么它不会做任何事情。因为按钮在该上下文中没有任何本机行为。 另外,对于我使用 onclick 事件处理程序的提交按钮,事件本身是提交还是单击?这是我真的很困惑的地方.. 如果用户点击了按钮,那么onclick事件就会触发。如果用户在表单中使用按下提交而没有实际单击按钮,则不会触发 onclick 事件。 谢谢是有道理的,所以在这种情况下,事件对象将被点击。以上是关于event.preventDefault 如何在无法停止的事件处理程序上工作?的主要内容,如果未能解决你的问题,请参考以下文章
如何在使用event.preventDefault()时使用.submit()或如何不相互取消?
在 onWheel 事件中使用 event.preventDefault 时,如何规避 reactjs 中的“被动事件监听器”
$stateChangeStart 删除最初启用的 event.preventDefault
$('.classitem').submit(function(event)event.preventDefault) 不起作用