Javascript window event button

MouseEvent.button

MouseEvent.button свойство доступное только для чтения, возвращает значение, соответствующее нажатой кнопки мыши, которое инициировало событие.

Это свойство предоставляет информацию только о том, какая кнопка или несколько кнопок были нажаты или отпущены для инициации события, и не имеет отношения к таким событиям как mouseenter (en-US) , mouseleave (en-US) , mouseover (en-US) , mouseout (en-US) или mousemove (en-US) .

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

Примечание: Не путайте это свойство со свойством MouseEvent.buttons , которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.

Синтаксис

var buttonPressed = instanceOfMouseEvent.button

Возвращаемые значения

Число, соответствующее нажатой кнопке:

• 0 : Нажата основная кнопка. Левая кнопка мыши или переназначенная пользователем другая кнопка
• 1 : Нажата вспомогательная кнопка. Колёсико или средняя кнопка мыши, если она есть
• 2 : Нажата вторичная кнопка. Правая кнопка мыши
• 3 : Нажата четвёртая кнопка мыши. Обычно кнопка браузера Назад
• 4 : Нажата пятая кнопка мыши. Обычно кнопка браузера Вперёд

Для мыши, перенастроенной под левую руку, значения нажатых кнопок меняются местами. В этом случае значения читаются справа налево.

Пример

script> var whichButton = function (e)  // Handle different event models var e = e || window.event; var btnCode; if ('object' === typeof e)  btnCode = e.button; switch (btnCode)  case 0: console.log('Нажата левая кнопка.'); break; case 1: console.log('Нажата средняя кнопка или колёсико.'); break; case 2: console.log('Нажата правая кнопка.'); break; default: console.log('Неопределённое событие: ' + btnCode); > > > /script> button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Нажмите кнопку мыши. /button> 

Спецификации

Поддерживается браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

onclick Event

The onclick event occurs when the user clicks on an HTML element.

Mouse Events

Event	Occurs When
onclick	The user clicks on an element
oncontextmenu	The user right-clicks on an element
ondblclick	The user double-clicks on an element
onmousedown	A mouse button is pressed over an element
onmouseenter	The pointer is moved onto an element
onmouseleave	The pointer is moved out of an element
onmousemove	The pointer is moving over an element
onmouseout	The mouse pointer moves out of an element
onmouseover	The mouse pointer is moved over an element
onmouseup	The mouse button is released over an element

See Also:

Tutorial:

Syntax

In JavaScript, using the addEventListener() method:

Technical Details

Bubbles:	Yes
Cancelable:	Yes
Event type:	MouseEvent
Supported HTML tags:	All exept: , , , , , , , , , , and

More Examples

Click a to display the date:

Click a element to change the text color:

Click me to change my color.

Another example on how to change the color of an element:

Click me to change my color.

Click to copy text from one input field to another:

function myFunction() document.getElementById(«field2»).value = document.getElementById(«field1»).value;
>

How to assign an «onclick» event to the window object:

function myFunction() document.getElementsByTagName(«BODY»)[0].style.backgroundColor = «yellow»;
>

Use onclick to create a dropdown:

function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>

Browser Support

onclick is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник