События мыши

Последнее обновление: 1.11.2015

Одну из наиболее часто используемых событий составляют события мыши:

  • click: возникает при нажатии указателем мыши на элемент

  • mousedown: возникает при нахождении указателя мыши на элементе, когда кнопка мыши находится в нажатом состоянии

  • mouseup: возникает при нахождении указателя мыши на элементе во время отпускания кнопки мыши

  • mouseover: возникает при вхождении указателя мыши в границы элемента

  • mousemove: возникает при прохождении указателя мыши над элементом

  • mouseout: возникает, когда указатель мыши выходит за пределы элемента

Например, обработаем события mouseover и mouseout:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<style>
	#blueRect{
		width:100px;
		height:100px;
		background-color:blue;
	}
	</style>
</head>
<body>
<div id="blueRect"></div>

<script>
function setColor(e){
	
	if(e.type==="mouseover")
		e.target.style.backgroundColor = "red";
	else if(e.type==="mouseout")
		e.target.style.backgroundColor = "blue";
}
var blueRect = document.getElementById("blueRect");
blueRect.addEventListener("mouseover", setColor);
blueRect.addEventListener("mouseout", setColor);
</script>
</body>
</html>

Теперь при наведении указателя мыши на блок blueRect он будет окрашиваться в красный цвет, а при уходе указателя мыши - блок будет обратно окрашиваться в синий цвет.

Объект Event является общим для всех событий. Однако для разных типов событий существуют также свои объекты событий, которые добавляют ряд своих свойств. Так, для работы с событиями указателя мыши определен объект MouseEvent, который добавляет следующие свойства:

  • altKey: возвращает true, если была нажата клавиша Alt во время генерации события

  • button: указывает, какая кнопка мыши была нажата

  • clientX: определяет координату Х окна браузера, на которой находился указатель мыши во время генерации события

  • clientY: определяет координату Y окна браузера, на которой находился указатель мыши во время генерации события

  • ctrlKey: возвращает true, если была нажата клавиша Ctrl во время генерации события

  • metaKey: возвращает true, если была нажата во время генерации события метаклавиша клавиатуры

  • relatedTarget: определяет вторичный источник возникновения события

  • screenX: определяет координату Х относительно верхнего левого угла экрана монитора, на которой находился указатель мыши во время генерации события

  • screenY: определяет координату Y относительно верхнего левого угла экрана монитора, на которой находился указатель мыши во время генерации события

  • shiftKey: возвращает true, если была нажата клавиша Shift во время генерации события

Определим координаты клика:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<style>
	#blueRect{
		width:100px;
		height:100px;
		background-color:blue;
	}
	</style>
</head>
<body>
<div id="blueRect"></div>

<script>
function handleClick(e){
	
	console.log("screenX: " + e.screenX);
	console.log("screenY: " + e.screenY);
	console.log("clientX: " + e.clientX);
	console.log("clientY: " + e.clientY);
}
var blueRect = document.getElementById("blueRect");
blueRect.addEventListener("click", handleClick);
</script>
</body>
</html>
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850