Действия по умолчанию и их отмена

Для многих событий назначены действия по умолчанию, т. е. действия, которые Web-браузер выполняет в ответ на возникшие в документе события. Например, при щелчке на гиперссылке действием по умолчанию будет переход по указанному URL-адресу, щелчок на кнопке Submit приводит к отправке данных формы и т. д.

Иногда действия по умолчанию необходимо прервать. Например, при отправке данных формы можно проверить их на соответствие ожидаемым и, если они не соответствуют установленным требованиям, прервать отправку. Для этого внутри функции обработчика необходимо вернуть значение false.

В листинге 1.18 приведен пример проверки правильности ввода адреса электронной почты в поле E-mail и прерывания перехода по гиперссылке.

Листинг 1.18. Прерывание действий по умолчанию

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Прерывание действий по умолчанию</title>
</head>
<body>
<div class="container my-3">
   <form action="#" method="GET" id="frm">
      <div class="form-group">
         <label for="email">E-mail:</label>
         <input type="text" class="form-control"
                name="email" id="email">
      </div>
      <div class="form-group">
         <button type="submit" class="btn btn-primary">
            Отправить</button>
      </div>
   </form>
   <p><a href="file.html">Нажмите для перехода по ссылке</a></p>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#frm').submit( function() {
      var p = /^[a-z0-9_.-]+@([a-z0-9-]+\.)+[a-z]{2,6}$/i;
      if ( p.test( $('#email').val() ) ) {
         return window.confirm('Отправить данные формы?');
      }
      else {
         window.alert('E-mail введен не правильно');
         $('#email')[0].focus();
         return false;
      }
   });
   $('a').click( function() {
      window.alert('Перехода по ссылке не будет');
      return false;
   });
   $('#email').focus( function() {
      $(this).css('background-color', '#fffbef');
   }).blur( function() {
      $(this).css('background-color', '#ffffff');
   });
});
</script>
</body>
</html>

Кроме возврата значения false для отмены действий по умолчанию можно воспользоваться методом preventDefault() объекта event (листинг 1.19). Проверить, был ли вызван метод preventDefault() ранее, позволяет метод isDefaultPrevented().

Листинг 1.19. Прерывание событий с помощью метода preventDefault()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Прерывание событий с помощью метода preventDefault()</title>
</head>
<body>
<div class="container my-3">
   <form action="#" method="GET" id="frm">
      <div class="form-group">
         <label for="email">E-mail:</label>
         <input type="text" class="form-control"
                name="email" id="email">
      </div>
      <div class="form-group">
         <button type="submit" class="btn btn-primary">
            Отправить</button>
      </div>
   </form>
   <p><a href="file.html">Нажмите для перехода по ссылке</a></p>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#frm').submit( function(e) {
      var p = /^[a-z0-9_.-]+@([a-z0-9-]+\.)+[a-z]{2,6}$/i;
      if ( p.test( $('#email').val() ) ) {
         if ( !window.confirm('Отправить данные формы?') ) {
            e.preventDefault();
         }
      }
      else {
         window.alert('E-mail введен не правильно');
         $('#email')[0].focus();
         e.preventDefault();
      }
   });
   $('a').click( function(e) {
      window.alert('Перехода по ссылке не будет');
      e.preventDefault();
   });
   $('#email').focus( function() {
      $(this).css('background-color', '#fffbef');
   }).blur( function() {
      $(this).css('background-color', '#ffffff');
   });
});
</script>
</body>
</html>

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов