尝试防止链接使用原版JavaScript重定向

Question

我正在编写一个事件，当用户单击链接时，数据的有效负载将被发送到服务器，并使用重定向到另一个页面的函数进行回调。

问题是：在成功制作 XHR 之前，我无法过早停止重定向链接。我把return false放在活动结束时，但它不起作用。

请注意，如果我使用JQuery版本，它工作得很好。但不是JS香草。

请帮我处理这个案子。提前感谢！

var button = document.getElementsByClassName('class');
if (button[0] != undefined) {
button[0].addEventListener("click", submitDataDemo);
}
function submitDataDemo() {
``
`
get and format the data
`
``

var sendDataRequest2 = new XMLHttpRequest();
sendDataRequest2.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
window.location.href = 'The success page';
}
};
sendDataRequest2.open('POST',
'server',
true);
sendDataRequest2.setRequestHeader('Content-type', 'application/json');
sendDataRequest2.send(payLoad);
return false;
}

Answer 1

您需要preventDefault：

function submitDataDemo(event) {
event.preventDefault()
// ...rest of function
}

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 2

我解决了这个问题，但仍然无法理解为什么return false不起作用。

在处理程序上使用preventDefault()和stopPropagation()将停止重定向我的链接，因为父元素也有事件单击！

var button = document.getElementsByClassName('class');
if (button[0] != undefined) {
button[0].addEventListener("click", submitDataDemo);
}
function submitDataDemo(event) {
event.preventDefault();
// .. function to be executed
event.stopPropagation();
}

谢谢@anthonygood的提示！

但是有人可以为我解释为什么return false在这里不起作用吗？我认为return false与同时使用preventDefault()和stopPropagation()相同？