MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

 

Кратко

Отменяет событие, если оно отменяемое, без остановки дальнейшего распространения этого события.

Синтаксис

event.preventDefault();

Пример

По умолчанию щелчок по флажку переключает его состояние на противоположное. В этом примере показано, как предотвратить такое поведение:

<!DOCTYPE html>
<html>
<head>
<title>Пример preventDefault</title>

<script>
function stopDefAction(evt) {
    evt.preventDefault();
}
    
document.getElementById('my-checkbox').addEventListener(
    'click', stopDefAction, false
);
</script>
</head>

<body>

<p>Пожалуйста, щёлкните по флажку.</p>

<form>
    <input type="checkbox" id="my-checkbox" />
    <label for="my-checkbox">Checkbox</label>
</form>

</body>
</html>

Вы можете посмотреть работу preventDefault в действии здесь.

В следующем примере некорректный ввод останавливается и вводимый символ не добавляется в поле с preventDefault().

<!DOCTYPE html>
<html>
<head>
<title>Пример preventDefault</title>

<script>
function Init () {
    var myTextbox = document.getElementById('my-textbox');
    myTextbox.addEventListener( 'keypress', checkName, false );
}

function checkName(evt) {
    var charCode = evt.charCode;
    if (charCode != 0) {
        if (charCode < 97 || charCode > 122) {
            evt.preventDefault();
            alert(
                "Пожалуйста, используйте только буквы нижнего регистра на латинице"
                + "\n" + "charCode: " + charCode + "\n"
            );
        }
    }
} 
</script> 
</head> 
<body onload="Init ()"> 
    <p>Пожалуйста, введите своё имя, используя только буквы нижнего регистра на латинице.</p>
    <form> 
        <input type="text" id="my-textbox" /> 
    </form> 
</body> 
</html>

Результат выполнения кода:

Примечания

Вызов preventDefault на любой стадии выполнения  потока событий отменяет событие, а это означает, что любое действие по умолчанию обычно принимается реализацией, как  результат события, которое  не произойдет.

Примечание:  В Gecko 6.0, вызов preventDefault() приводит к event.defaultPrevented к переходу значения в состояние True.

Вы можете использовать event.cancelable чтобы проверить, является ли событие отменяемым. Вызов preventDefault для неотменяемых событий не имеет никакого эффекта.

preventDefault не останавливает дальнейшее распространение событий на DOM. Для этого следует использовать event.stopPropagation.

Спецификации

Спецификация Статус Комментарий
DOM
Определение 'Event.preventDefault()' в этой спецификации.
Живой стандарт  
DOM4
Определение 'Event.preventDefault()' в этой спецификации.
Рекомендация  
Document Object Model (DOM) Level 2 Events Specification
Определение 'Event.preventDefault()' в этой спецификации.
Рекомендация

первичное определение.

Метки документа и участники

 Внесли вклад в эту страницу: letthecode, Terbiy, __strelkov, icw82
 Обновлялась последний раз: letthecode,