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

最佳做法是尽快给它打电话。

如果代码在到达function_A()之前抛出任何错误，则可能无法调用它，浏览器将执行默认操作。

一旦被调用，但如果在此之后抛出错误，则默认操作不会发生

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"
    );
  }
 }
}

它将取消所有事件操作“如果你输入一个不起作用的字母”//只从地方更改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方法时有关系吗？

3 个答案: