event.preventDefault()如何取消掉
时间: 2023-10-23 07:11:46 浏览: 51
如果想取消掉通过event.preventDefault()方法阻止的默认提交行为,可以使用event.returnValue属性来实现。在事件处理函数中将event.returnValue设置为true即可取消掉阻止默认提交行为的效果。
以下是一个示例代码:
```javascript
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交行为
// ...
const xhr = new XMLHttpRequest();
xhr.open('POST', 'path/to/servlet', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
event.returnValue = true; // 取消阻止默认提交行为
form.submit(); // 手动触发表单提交
}
};
const data = new FormData(form);
xhr.send(data);
});
```
在上面的代码中,我们在事件处理函数中阻止了表单的默认提交行为,然后使用XMLHttpRequest对象发送了一个POST请求。当请求完成后,我们将event.returnValue设置为true,表示取消阻止默认提交行为的效果。最后,我们手动触发了表单的提交,这样表单的数据就会被浏览器自动打包成一个请求体,并发送给后端Servlet进行处理。
需要注意的是,取消阻止默认提交行为的效果可能会导致表单提交失败,比如表单中存在未填写的必填项或者格式不正确的数据。因此,在设置event.returnValue为true之前,需要确保表单中的数据已经通过了前端的校验。