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

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

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

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

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

<!doctype html>
<html>
<head>
<title>Прерывание действий по умолчанию</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#frm").submit(function() {
      var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,6}$/i;
      if (p.test($("#email").val())) {
         if (window.confirm("Отправить данные формы?")) {
            return true;
         }
         else return false;
      }
      else {
         alert("E-mail введен не правильно");
         return false;
      }
   });
   $("a").click(function() {
      alert("Перехода по ссылке не будет");
      return false;
   });
   $("#email").focus(function() {
      $(this).css("background-color", "#fffbef");
   }).blur(function() {
      $(this).css("background-color", "#ffffff");
   });
});
</script>
</head>
<body>
<form action="file.php" method="GET" id="frm">
E-mail:<br>
<input type="text" name="email" id="email"><br>
<input type="submit" value="Отправить">
</form>
<a href="file.html">Нажмите для перехода по ссылке</a><br><br>
</body>
</html>

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

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

<!doctype html>
<html>
<head>
<title>Прерывание событий с помощью метода preventDefault()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
function f_preventDefault(e) {
   (e.preventDefault) ? e.preventDefault() : e.returnValue = false;
}
$(document).ready(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("Отправить данные формы?")) {
            return true;
         }
         else f_preventDefault(e);
      }
      else {
         alert("E-mail введен не правильно");
         f_preventDefault(e);
      }
   });
   $("a").click(function(e) {
      alert("Перехода по ссылке не будет");
      f_preventDefault(e);
   });
   $("#email").focus(function() {
      $(this).css("background-color", "#fffbef");
   }).blur(function() {
      $(this).css("background-color", "#ffffff");
   });
});
</script>
</head>
<body>
<form action="file.php" method="GET" id="frm">
E-mail:<br>
<input type="text" name="email" id="email"><br>
<input type="submit" value="Отправить">
</form>
<a href="file.html">Нажмите для перехода по ссылке</a><br><br>
</body>
</html>
Предыдущая статья Все статьи Следующая статья