Обработчик события onclick

Cобытие click - это одно из событий мыши в JavaScript. О нём уже было сказано в прошлой теме. Здесь мы рассмотрим его более подробно. Напомню, что обработчик события onclick срабатывает при нажатии на элементе левой кнопкой мыши.

Координаты указателя мыши

Объект события click содержит координаты того места, на котором был произведён клик. Свойства clientX и clientY содержат координаты указателя мыши относительно окна браузера. Свойства pageX и pageY содержат координаты относительно документа. Координаты отсчитываются от левого верхнего угла. Указанные свойства есть и у других объектов событий мыши.

Создадим блок и поставим на него обработчик события onclick. Он будет определять координаты указателя мыши и записывать их внутрь блока. Перед блоком добавим ещё один элемент с большой высотой, чтобы появилась прокрутка. Это нужно для того, чтобы Вы могли увидеть, как прокрутка страницы влияет на определение координат.

Стиль:

#big {
  width: 30px;
  height: 700px;
  background-color: #AAA;
  }
#block {
  width: 500px;
  height: 400px;
  border: 1px solid Red;
  }

HTML код:

<div id="big"></div>
<div id="block"></div>

JavaScript:

let block = document.getElementById('block');
block.onclick = function(event)
{
  block.innerHTML = 'Относительно окна: ' +
    event.clientX + ' ' + event.clientY +
    '<br>Относительно документа: ' +
    event.pageX + ' ' + event.pageY;
};

Запустите страницу, прокрутите её до блока и нажмите левую кнопку мыши внутри блока. В блоке должны появиться координаты того места, в котором сработало событие. Координаты могут быть с дробной частью. Это связанно с особенностью расчёта высоты документа в браузере. Напомню, что по умолчанию в браузерах есть отступы, и элементы страницы находятся не возле самого края окна браузера, а на некотором расстоянии.

Прокрутите ещё немного страницу и кликните примерно в том же месте блока. Вы увидите, что координаты относительно документа не изменились, ведь блок не поменял своё положение в документе. А координаты относительно окна браузера изменились, потому что указатель мыши находился в другом месте окна.

Определение координат клика иногда используется на практике для размещения в этом месте каких-то элементов страницы.

Клик с нажатой клавишей

У объекта события click есть свойство shiftKey, которое содержит true, если клик был сделан при нажатой клавише Shift. Если клик был без Shift, то свойство содержит false. Это свойство используется для того, чтобы обработчик выполнил какие-то действия, только если клик был с нажатой клавишей Shift. Подобные свойства есть для других клавиш:

altKey

ctrlKey

metaKey - для Mac

Добавим в обработчик такой код:

if (event.shiftKey)
alert('Клик с shift');

Если сделать клик в блоке с нажатой клавишей Shift, то появится сообщение. В остальном, действия обработчика не изменились.

Клик правой кнопкой

Событие contextmenu - это нажатие правой кнопки мыши. Объект этого события имеет в основном такие же свойства, как объект события click. При нажатии правой кнопки мыши обычно появляется контекстное меню браузера. Появление этого меню можно отменить. Добавим блоку обработчик события:

block.oncontextmenu = function()
{
  alert('Правая кнопка');
  return false;
};

В следующих темах будут рассмотрены остальные события мыши.