我们使用 preventDefault 方法是否重要？答案

【问题标题】：Does it matter when we use the preventDefault method?我们使用 preventDefault 方法是否重要？
【发布时间】：2018-01-30 17:06:11
【问题描述】：

我们使用 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);

}

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

我想我主要关心的是，如果我在函数中有很多事情要做，浏览器是否有可能在最终阻止默认之前执行其默认行为？或者它会在尝试执行其默认行为之前等待执行函数中的所有操作吗？

【问题讨论】：

标签： javascript methods preventdefault

【解决方案1】：

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

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

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

【讨论】：

【解决方案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"
      );
    }
  }
}

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

【讨论】：

【解决方案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

【讨论】：