我们何时使用 preventDefault 方法重要吗？

Question

我们何时使用 preventDefault 方法有关系吗？（就在函数的开头与结尾）。我看过的所有教程都将 preventDefault 放在函数的末尾，但我认为您要做的第一件事就是阻止默认行为。我注意到它在函数的开头和在函数的最后都起作用：

function calculateResults(e){

    e.preventDefault();
    //UI Vars
    const amount = document.querySelector(`#amount`);
    const interest = document.querySelector(`#interest`);
    const years = document.querySelector(`#years`);
    const monthlyPayment = document.querySelector(`#monthly-payment`);
    const totalPayment = document.querySelector(`#total-payment`);
    const totalInterest =document.querySelector(`#total-interest`);

    const princapal =  parseFloat(amount.value);
    const calculatedInterest = parseFloat(interest.value)/100/12;
    const calculatedPayment = parseFloat(years.value) * 12;

    // compute monthly payments
    const x = Math.pow(1 + calculatedInterest, calculatedPayment);

}

VS

function calculateResults(e){

    //UI Vars
    const amount = document.querySelector(`#amount`);
    const interest = document.querySelector(`#interest`);
    const years = document.querySelector(`#years`);
    const monthlyPayment = document.querySelector(`#monthly-payment`);
    const totalPayment = document.querySelector(`#total-payment`);
    const totalInterest =document.querySelector(`#total-interest`);

    const princapal =  parseFloat(amount.value);
    const calculatedInterest = parseFloat(interest.value)/100/12;
    const calculatedPayment = parseFloat(years.value) * 12;

    // compute monthly payments
    const x = Math.pow(1 + calculatedInterest, calculatedPayment);

    e.preventDefault();
}

我想我主要担心的是，如果我在函数中进行了很多操作，浏览器是否有可能在最后进入 preventDefault 之前执行其默认行为？或者它会在尝试执行其默认行为之前等待执行函数中的所有操作吗？

Answer 1

最好的做法是尽快调用它。

如果代码在到达 preventDefault 之前抛出任何错误，它可能不会被调用，浏览器将执行默认操作。

一旦调用它，但是如果之后抛出错误，默认操作将不会发生

Answer 2

有些情况下您并不总是想使用 e.preventDefault，这意味着您在函数中的何处调用它并不重要。

这是一些 example code from MDN:

function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "Please use lowercase letters only."
        + "\n" + "charCode: " + charCode + "\n"
      );
    }
  }
}

也就是说，如果我绝对打算阻止默认操作，我自己通常会在开头调用它。

Answer 3

在事件流的任何阶段调用 preventDefault() 都会取消该事件，这意味着该事件通常由实现执行的任何默认操作都不会发生。 preventDefault

这很重要

按预期工作

function checkName(evt) { 
  var charCode = evt.charCode;
  if (charCode != 0) {
   if (charCode < 97 || charCode > 122) {
     evt.preventDefault();
     displayWarning(
      "Please use lowercase letters only."
      + "\n" + "charCode: " + charCode + "\n"
    );
  }
 }
}

它会取消所有的事件动作"if you type a letter it won't work" //只从地方

改变evt.preventDefault

function checkName(evt) { 
 evt.preventDefault();
  var charCode = evt.charCode;
  if (charCode != 0) {
   if (charCode < 97 || charCode > 122) {
    displayWarning(
     "Please use lowercase letters only."
     + "\n" + "charCode: " + charCode + "\n"
    );
   }
  }
}

示例codePen

我们何时使用 preventDefault 方法重要吗？

Does it matter when we use the preventDefault method?

javascript

methods

preventdefault