Нажатие левой кнопки мыши html

События мыши

Ранее в скриптах мы с вами часто использовали событие click – щелчок левой кнопкой мыши. В действительности – это составное событие, то есть, мы сначала нажимаем левую кнопку, затем отпускаем и только потом генерируется событие click. Причем в момент нажатия и отпускания кнопки возникают свои события:

mousedown/mouseup – нажатие и отпускание кнопки мыши.

Давайте в этом убедимся, возьмем вот такой HTML-документ:

DOCTYPE html> html> head> title>Уроки по JavaScripttitle> head> body> script> document.addEventListener("mouseup", ()=>console.log("mouseup")); document.addEventListener("click", ()=>console.log("click")); document.addEventListener("mousedown", ()=>console.log("mousedown")); script> body> html>

В нем прописаны три обработчика на события click, mousedown и mouseup. Теперь кликнем по документу и в консоли увидим эти три события в порядке:

mousedown → mouseup → click

И это стандартизированный порядок: данные события возникают именно в такой последовательности. Для двойного клика тоже есть свое событие dblclick. Добавим его:

document.addEventListener("dblclick", ()=>console.log("dblclick"));

Теперь при двойном щелчке левой кнопкой мыши, мы видим такие события:

mousedown → mouseup → click → mousedown → mouseup → click → dblclick

Эта последовательность также стандартизирована и события следуют друг за другом именно в таком порядке.

• event.which == 1 – левая кнопка;
• event.which == 2 – средняя кнопка;
• event.which == 3 – правая кнопка.

document.addEventListener("mousedown", (event)=>console.log("mousedown: "+event.which)); document.addEventListener("mouseup", (event)=>console.log("mouseup: "+event.which));

• event.shiftKey – true, если нажата клавиша Shift и false в противном случае;
• event.altKey – true при нажатом Alt (или Opt для Mac) и false иначе;
• event.ctrlKey – true при нажатом Ctrl и false иначе;
• event.metaKey – true при нажатом Cmd (для Mac) и false иначе.

document.addEventListener("click", (event) => { if(event.shiftKey && event.ctrlKey) console.log("click"); });

Мы здесь увидим сообщение «click» только если при клике были нажаты клавиши Shift и Ctrl. Обратите внимание, когда мы пишем браузерные скрипты, то предполагаем, что они могут быть запущены на самых разных компьютерах с разными ОС, в том числе и Mac OS. Так вот, в ОС Mac пользователи вместо клавиши Ctrl нажимают на клавишу Cmd. И это следует учесть в скрипте, например, так:

• clientX/clientY – координаты курсора мыши относительно окна браузера;
• pageX/pageY – координаты курсора мыши относительно HTML-документа.

document.addEventListener("mousemove", (event)=>console.log("mousemove: "+event.clientX+", "+event.clientY));

• mouseover – возникает при наведении курсора мыши на элемент HTML-документа;
• mouseout – возникает при покидании курсора мыши элемента HTML-документа.

div class="parent">DIV p class="child">Pp> div>

style> .parent {background: #CC4444; padding: 10px 0 10px 10px; display: inline-block;width: 100px;} .child {background: #00CC00; padding: 10px;} style>

document.addEventListener("mouseover", (event)=>{ let prop = "target = "+event.target.tagName; if(event.relatedTarget != null) prop+=", relatedTarget = "+event.relatedTarget.tagName; console.log("mouseover: "+prop); });

• target – ссылка на объект над которым находится курсор мыши;
• relatedTarget – ссылка на объект, с которого ушел курсор мыши.

• relatedTarget – ссылка на объект над которым находится курсор мыши;
• target – ссылка на объект, с которого ушел курсор мыши.

let div = document.querySelector("div.parent"); div.addEventListener("mouseover", showInfo); function showInfo(event) { let prop = "target = "+event.target.tagName; if(event.relatedTarget != null) prop+=", relatedTarget = "+event.relatedTarget.tagName; let name = event.currentTarget.tagName; console.log(name+" mouseover: "+prop); }

1. Не всплывают.
2. Событие mouseenter генерируется когда указатель оказывается над элементом и при этом не важно: потомок это элемента или сам элемент.
3. Событие mouseleave срабатывает при покидании элемента целиком (дочерние элементы здесь не учитываются).

document.addEventListener("mouseenter", showInfo);

document.addEventListener("mouseover", showInfo);

то мы его успешно перехватываем. Вот эти ограничения следует учитывать при использовании событий mouseenter и mouseleave. Итак, на этом занятии мы с вами рассмотрели работу следующих событий мыши:

mousedown/mouseup	При нажатии и отпускании кнопки мыши
click	При щелчке левой кнопкой мыши
dblclick	При двойном щелчке левой кнопкой мыши
mousemove	При перемещении мыши
mouseover/mouseout	При наведении и покидании курсора мыши на элемент
mouseenter/mouseleave	При наведении и покидании курсора мыши на элемент (не всплывают и не учитывают дочерние элементы)

Также мы с вами рассмотрели следующие свойства объекта event:

event.which	Номер нажатой кнопки мыши
event.shiftKey/altKey/ctrlKey/metaKey	Флаги, указывающие на соответствующую нажатую кнопку клавиатуры
event.clientX/clientY	Координаты курсора мыши относительно окна браузера
event.pageX/pageY	Координаты курсора мыши относительно HTML-документа
event.target/ relatedTarget	Ссылки на объекты в зависимости от типов события: mouseover/mouseout

Источник

Нажатие кнопок мыши

Определить, какая кнопка мыши была нажата (левая, правая или колёсико) можно через метод onmousedown .

document.getElementById('button').onmousedown = function(e) < if (e.which == 1) <> // Нажата левая кнопка мыши if (e.which == 2) <> // Нажато колёсико мыши if (e.which == 3) <> // Нажата правая кнопка мыши >

Для левой и правой кнопки мыши есть свои методы.

// код выполняется после нажатия левой кнопки мыши document.getElementById('button').onclick = function() <> // код выполняется после нажатия правой кнопки мыши document.getElementById('button').oncontextmenu = function() <>

Выполнять код при нажатии по ссылке

Если надо выполнять код при нажатии по ссылке, то сначала надо отменить действие по умолчанию (переход на другую страницу). Делается это через метод preventDefault() .

// выполнять код при нажатии на элемент с ИД #link document.getElementById('link').onclick = function(e) < // отменяется событие по умолчанию e.preventDefault(); alert('кнопка нажата'); >

Двойное нажатие левой кнопки мыши

Выполнять код при двойном нажатии на левую кнопку мыши можно через событие ondblclick .

// выполнять код при нажатии на элемент с ИД #button document.getElementById('button').ondblclick = function() < alert('кнопка нажата'); >

Нажатие кнопки мыши с зажатой клавишей

При нажатии по кнопке мыши, можно также проверять какая клавиша при этом была зажата (Ctrl, Shift, Alt или Cmd).

document.getElementById('mouse-click').onmousedown = function(e) < if (e.altKey) <> // Была зажата клавиша «Alt» if (e.shiftKey) <> // Была зажата клавиша «Shift» if (e.ctrlKey) <> // Была зажата клавиша «Ctrl» if (e.metaKey) <> // Была зажата клавиша «Cmd» >

Клавиша «Cmd» присутсвует на компьютерах Mac.

Авторизуйтесь, чтобы добавлять комментарии

Источник

Click средствами CSS

Часто в наших проектах нужно привязать определённое действие к действию пользователя. Например при нажатии левой кнопки мыши на определённом диве (блоке) меняется цвет этого блока. Вообще нажатие левой кнопки мыши называется click. Для обработки этого события в основном используется javascript и jquery, но так же есть возможность и с помощью css клик отследить. Об этом мы и поговорим в данном посте. Возникает конечно законный вопрос, зачем ослеживать средствами css click, всё прекрасно работает и с помощью javascript. Но если в браузере пользователя js отключен, то функционал сайта будет не полный, а клик css будет работать всегда. Есть несколько методов обработать событие клик css. Первый из них «checked»

Метод «checked»

Для начала напишем html и css код.

 
click me
 
Если фон красный то чекбокс выбран
 
Чекбокс выбран
 
 

.box < width: 200px; height: 100px; background-color: crimson; position: relative; z-index: -10;/*делаем самым нижним слоем*/ margin: 0 auto; margin-top: 50px; >.noncheck1, .noncheck2, .noncheck3 < width: 200px; height: 100px; display: block; position: relative; background-color: lightgrey; z-index: 10px;/*самый верхний слой*/ >.check < width: 200px; height: 100px; display: block; position: absolute;/*благодаря абсолютн. позиц. смещён под верхний слой*/ top: 1px; left: 1px; z-index: -1;/*средний слой*/ >label input input:checked ~ .box .noncheck1 

Давайте разберёмся с кодом. У нас три блока .box, .noncheck1, .check. Все они спозиционированны относительно друг друга так что, блок .check находится под .noncheck1. CSS кнопок не стал выкладывать в листинг так как он не важен. И вот начинаем разбираться с методом «checked». Метод основан на использовании элемента checkbox и его атрибута checked. Мы нажимаем на чекбокс и его состояние переходит в чекед. К этому событию с помощью селекторов css «~» или «+» мы привязываем изменение чего либо. Например изменение цвета текста или фона определённого элемента. В примере мы выбираем чекбокс и в диве .box див .noncheck1 становится невидимым ( display: none), мы можем видеть див .check. Для того, что бы оформить переключатель состояния фона в виде кнопки мы присваиваем нашему чекбоксу label и уже из него создаём кнопку. Теперь нам чекбокс не нужен (у нас есть кнопка) и мы его скрываем ( display: none)

Метод «target»

Метод таргет работает по такому принципу. Мы создаём кнопку .butt2 с сылкой On. В ссылке мы назначаем хэш тег «#On». При нажатии на ссылку в виде кнопки с хэштегом происходит переход к диву с . Этот див попадает в target. Происходит активация псевдокласса target. У нас на это событие повешено скрытие дива .noncheck2 так же за счёт display: none. При нажатии на другую ссылку-кнопку див уходит из таргета, так как таргет переходит на другой блок. Див .noncheck2 опять появляется.

Mетод «tabindex»

Данный метод основан на использовании атрибута tabindex. Он заключается в том, что некоторым элементам вебстраницы мы можем с помощью tabindex задать фокус ввода. Элемент получает событие focus (.butt4:focus) , которое можно обработать средствами css. Мы используя селектор соседей «~» назначаем элементу .noncheck3 состояние display: none, когда у нас происходит событие .butt4:focus. Когда у нас фокус переходит с кнопки на другой элемент страницы .noncheck3 возвращается в изначальное состояние.

Источник