Добавляем...


События мыши
События мыши в DOM2, соответствуют событиям в (X)HTML. Они представлены в таблице. Поскольку в соответствии со спецификациями DOM2 не все события допускают фазу возврата и не все действия по умолчанию могут быть отменены, для событий в таблице также указываются соответствующие возможности.

Событие Фаза возврата Возможность отмены
click Да Да
mousedown Да Да
mouseup Да Да
mouseover Да Да
mousemove Да Нет
mouseout Да Да

Когда происходит событие мыши, браузер наполняет объект Event дополнительной информацией, описанной ниже

Свойство Описание
altKey Логическое значение, указывающее, была ли нажата клавиша ALT
button Числовое значение, соответствующее использовавшейся кнопке мыши (обычно 0 соответствует левой, 1 — средней, а 2 — правой кнопкам)
clientX Горизонтальная координата точки, в которой произошло событие, относительно окна содержимого браузера
clientY Вертикальная координата точки, в которой произошло событие, относительно окна содержимого браузера
ctrlKey Логическое значение, указывающее, была ли нажата клавиша CTRL
detail Указывает число щелчков мыши (если таковые были вообще)
metaKey Логическое значение, указывающее, была ли нажата клавиша МЕТА
relatedTarget Ссылка на узел, связанный с событием; например, для mouseove г она указывает на узел, по которому указатель мыши движется, а для mouseout — на узел, который указатель мыши покидает
screenX Горизонтальная координата точки, в которой произошло событие, относительно всего экрана
screenY Вертикальная координата точки, в которой произошло событие, относительно всего экрана
shiftKey Логическое значение, указывающее, была ли нажата клавиша SHIFT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- mozilla browsers only -->
<head>
<title>События мыши DOM2</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h2>События мыши DOM2</h2>
<form id="mouseform" name="mouseform" action="#" method="get">
Нажата ли клавиша Alt ?
<input id="altkey" type="text" /><br />
Нажата ли клавиша Cеrl ?
<input id="controlkey" type="text" /><br />
Нажата ли клавиша Meta ?
<input id="metakey" type="text" /><br />
Нажата ли клавиша Shift ?
<input id="shiftkey" type="text" /><br />
Координаты щелчка относительно браузера: <input id="clientx" type="text" />,
<input id="clienty" type="text" /> <br />
Координаты щелчка относительно экрана: <input id="screenx" type="text" />,
<input id="screeny" type="text" /> <br />
Нажата кнопка: <input id="buttonused" type="text" /><br /><br />
</form>
<hr />
Щелкните в Любом месте документа <h2> Поддерживается OPERA и Firefox</h2>
<script type="text/javascript">

function showMouseDetails(event)
{
var theForm = document.mouseform;
theForm.altkey.value = event.altKey;
theForm.controlkey.value = event.ctrlKey;
theForm.shiftkey.value = event.shiftKey;
theForm.metakey.value = event.metaKey;
theForm.clientx.value = event.clientX;
theForm.clienty.value = event.clientY;
theForm.screenx.value = event.screenX;
theForm.screeny.value = event.screenY;
if (event.button == 0)
theForm.buttonused.value = "left";
else if (event.button == 1)
theForm.buttonused.value = "middle";
else
theForm.buttonused.value = "right";
}
document.addEventListener("click", showMouseDetails, true);

</script>
</body>
</html>


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика