Имеет ли значение, когда мы используем метод preventDefault?

Имеет ли значение, когда мы используем метод preventDefault? (прямо в начале функции vs в конце). Все учебники, которые я смотрел, помещают 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 в конце? Или он будет ждать, чтобы сделать все в функции, прежде чем он попытается сделать свое поведение по умолчанию?

3 2
javascript methods preventdefault

3 ответа:

Лучше всего позвонить ему как можно скорее.

Если какая-либо ошибка возникает в коде до того, как он достигает preventDefault, она может не вызываться, и браузер выполнит действие по умолчанию.

Как только он вызывается, однако, если после этого возникает ошибка, действие по умолчанию не будет выполняться

5

Бывают ситуации, когда вы не всегда захотите использовать e.preventDefault, Что означает, что то, где вы вызываете его в функции, на самом деле не имеет значения.

Вот пример кода из 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"
      );
    }
  }
}
Тем не менее, я сам обычно вызываю его в начале, если я абсолютно намерен предотвратить действие по умолчанию.
1

Вызов функции 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 from place 

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

0