Методы обработки действий по умолчанию

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


Иногда действия по умолчанию необходимо прервать. Например, при отправке данных формы можно проверить их на соответствие ожидаемым и, если они не соответствуют установленным требованиям, прервать отправку. Для этого внутри функции обработчика необходимо вернуть значение false.
В Листинге 6.9 приведен пример проверки правильности ввода почтового адреса в поле E-mail и прерывания перехода по гиперссылке при обнаружении ошибки.
Листинг 6.9. Прерывание действий по умолчанию
<html>
<head>
<title>Прерывание действий по умолчанию</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#frm").submit(function() {
var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,4}$/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. Прерывание событий с помощью метода preventDefault()
<html>
<head>
<title>Прерывание событий с помощью метода preventDefault()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
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,4}$/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>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *