JavaScript Coordinates of Mouse

Javascript MouseEvent getModifierState() Method

Last Updated : 30 Sep, 2024

The mouseEvent.getModifierState() method is used to determine the state of a specified modifier key at the time an event occurs. It returns true if the specified modifier key is being pressed, and false if it is not.

The following modifier keys are active only while they are being pressed:

Alt
Control
Meta
Shift

Additionally, some modifier keys toggle their state when clicked: CapsLock, ScrollLock, and NumLock. These keys remain active after being clicked and are deactivated only when clicked again.

Syntax:

event.getModifierState(key)

Parameters:

key: It refers to the modifier key. It is case sensitive.

Return Value:

It returns a boolean value that indicates whether the specified modifier key is activated or not.

true: it indicates that the specified modifier key is pressed or activated.
false: it indicates that the specified modifier key is not pressed.

Example: In this example if CapsLock is activated then true will be displayed, otherwise, false. To see the effect click on the input element after switching CapsLock on/off.

html

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript Mouse Event</title>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h2>
        mouseEvent getModifierState() Method
    </h2>

    Input: <input type="text" onmousedown="geek(event)">

    <p id="p"></p>

    <script>
        function geek(event) {
            var doc = event.getModifierState("CapsLock");
            document.getElementById("p").innerHTML = 
              "Caps Lock activated: " + doc;
        }
    </script>
</body>

</html>

Output:

Supported Browsers:

The browser supported by getModifierState() method are listed below:

Apple Safari 10.1
Google Chrome 30.0
Firefox 15.0
Opera 17.0

JavaScript Coordinates of Mouse

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

JavaScript contextmenu MouseEvent

When we click the right mouse button on our desktop, a menu-like box appears and this box is called the context menu. In JavaScript, a context menu event runs when a user tries to open a context menu. This can be done by clicking the right mouse button. This article demonstrates executing any operat

JavaScript removeEventListener() method with examples

Javascript removeEventListener() is an inbuilt function that is used to remove an event handler that was previously added using the addEventListener() function from the element. Syntax:element.removeEventListener(event, listener, useCapture)Parameters:It accepts three parameters which are specified

JavaScript Coordinates of Mouse

In JavaScript, we have methods that help us to capture the location of the mouse on the screen. The top left corner of the screen is (0, 0) i,e, X, and Y coordinates are (0, 0). This means that vertical zero is the topmost point and horizontal zero is the leftmost point.Â In this article, we are goin

JavaScript MouseEvent altKey Property

The mouseEvent altKey property is used to define whether the alt key is pressed or not. It is a boolean value. When the alt key is pressed then on click of the mouse buttons it returns true and if it is not pressed then it returns false. Syntax: event.altKey Return Value: It returns a boolean value

JavaScript onmouse Events

The onmouse event is used to define the operation using the mouse. JavaScript onmouse events are: onmouseover and onmouseoutonmouseup and onmousedownonmouseenter and onmouseleave JavaScript onmouseover and onmouseout: The onmouseover and onmouseout events occur when the mouse cursor is placed over s

JavaScript MouseEvent ctrlKey Property

The mouseEvent ctrlKey property is used to define whether the ctrl key is pressed or not. It is a boolean value. When the ctrl key is pressed then on click of the mouse buttons it returns true and if it is not pressed then it returns false. Syntax: event.ctrlKey Return Value: It returns a boolean va

How to Get Selected Index on Mouseover in JavaScript ?

To obtain the selected index on mouseover in JavaScript, attach event listeners to the parent container and utilize iteration through child elements to discover the index of the hovered element. By tracking the index of the hovered element during this process, you can determine the selected index ac

JavaScript MouseEvent Button Property

The MouseEvent button property is used to define the left or right-click events. When the mouse button is clicked then it returns an integer value which describes the left, right, or middle mouse button. Syntax: event.button Return Value: This event returns an integer value on mouse click events are

HTML DOM KeyboardEvent getModifierState() Method

The KeyboardEvent getModifierState() method in HTML DOM is used to return whether a specified modifier key is pressed, or activated. The KeyboardEvent getModifierState() method returns true if the specified key is pressed, otherwise it returns false. The list of key which is pressed then Modifier ke

p5.js Element mouseOver() Method

The mouseOver() method of p5.Element in p5.js is invoked whenever the user moves the mouse pointer on the element. It can be used to attach event listeners to an element. Syntax: mouseOver( fxn ) Parameters: This function accepts a single parameter as mentioned above and described below: fxn: It is