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

Опубликовал: Четверг, Март 29, 2012 в категории HTML | Пока нет комментариев

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

Иногда действия по умолчанию необходимо прервать. Например, при от- правке данных формы можно проверить их на соответствие ожидаемым и, если они не соответствуют, прервать отправку. Для этого необходимо вер- нуть значение false. Кроме возврата значения false для отмены действий по умолчанию можно воспользоваться методом preventDefault() объекта event или свойством returnValue.

В листинге 3.37 приведен пример проверки правильности ввода E-mail и пре-

рывания перехода по гиперссылке.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Прерывание действий по умолчанию</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-

1251">

<script type="text/javascript">

<!-

function f_test() {

var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,6}$/i;

// Получаем значение поля email

var email = document.forms[0].email.value;

if (p.test(email)) {

if (window.confirm("Отправить данные формы?")) {

return true; // Отправляем

}

else return false; // Прерываем

}

else {

window.alert("E-mail введен неправильно");

return false; // Прерываем

}

}

function f_event(e) {

e = e || window.event;

if (e.preventDefault) e.preventDefault(); else e.returnValue = false; window.alert("Перехода по ссылке не будет!");

}

//->

</script>

</head>

<body>

<form action="file.php" method="GET" onsubmit="return f_test();">

<div>

E-mail:<br>

<input type="text" name="email"><br>

<input type="submit" value="Отправить">

</div>

</form>

<p>

<a href="file.html" onclick="window.alert(‘Перехода по ссылке не будет!’);

return false;">Нажмите для перехода по ссылке</a><br><br>

<a href="file.html" onclick="f_event(event);">

Нажмите для перехода по ссылке</a>

</p>

</body>

</html>

Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)

Похожие посты:

Комментировать

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>