Skip to main content

Mouse Events

UI Events: Mouse Events

What is a mouse event in JavaScript?​

View Answer:
Interview Response: Mouse events are JavaScript events that get triggered due to the user's interaction with the mouse, like click, double-click, mouse move, and mouse over.

What is the event order of a mouse left-click in the browser?​

View Answer:
Interview Response: The event order for a mouse left-click in the browser is: 'mousedown', 'mouseup', and then 'click'. If the click was on a link or button, it would then trigger the 'submit' or 'navigate' event. The left button is considered the primary button that returns the event.button equaling zero.

What's the difference between 'click' and 'dblclick' events?​

View Answer:
Interview Response: 'Click' event triggers on a single mouse button click. 'Dblclick' triggers when the mouse button is clicked twice in quick succession.

If a user is on a MAC, what is the event property key for their OS?​

View Answer:
Interview Response: The event property key for the Command key on a Mac within JavaScript is `event.metaKey`. It returns a Boolean value `true` if the key is pressed, otherwise `false`.

Code Example:

document.addEventListener('keydown', function(event) {
    if (event.metaKey) {
        console.log('Command key was pressed');
    }
});

In this code, when a key is pressed, if it's the Command key, the message 'Command key was pressed' will be logged to the console.

What is the 'mousemove' event?​

View Answer:
Interview Response: The 'mousemove' event in JavaScript is triggered when the mouse pointer is moving over an element. It provides real-time position of the mouse cursor while it is over the targeted element.

Code Example:

document.addEventListener('mousemove', function(event) {
    console.log(`Mouse position: X = ${event.clientX}, Y = ${event.clientY}`);
});

This code logs the current mouse position in the console every time the mouse moves.

Can you name some mouse button events?​

View Answer:
Interview Response: The most common mouse button events are include mousedown, mouseup, and click.

Can you explain the difference between 'mouseover' and 'mouseenter' events?​

View Answer:
Interview Response: The 'mouseover' event triggers when the mouse enters an element or its child elements, while 'mouseenter' only triggers when the mouse enters the element itself, not its children.

Code Example:

<div id="parent">
    Parent
    <div id="child">Child</div>
</div>

<script>
document.getElementById('parent').addEventListener('mouseover', function() {
    console.log('Mouseover on parent');
});

document.getElementById('parent').addEventListener('mouseenter', function() {
    console.log('Mouseenter on parent');
});

document.getElementById('child').addEventListener('mouseover', function() {
    console.log('Mouseover on child');
});

document.getElementById('child').addEventListener('mouseenter', function() {
    console.log('Mouseenter on child');
});
</script>

In this example, moving the mouse over the 'Child' div will trigger both the 'Mouseover on child' and 'Mouseover on parent' logs, but only the 'Mouseenter on child' log, not the 'Mouseenter on parent'.

What differentiates window and document relative mouse positions?​

View Answer:
Interview Response: Window-relative mouse positions (pageX/Y) are from the top left corner of the whole document and do not change when the page begins to scroll, while document-relative positions (clientX/Y) are from the viewport (visible area of the document).
Technical Response: In summary, document-relative coordinates pageX/Y are numbered from the document's left top corner and do not change when the page begins to scroll. ClientX/Y, on the other hand, are counted from the upper left-hand corner of the current window and do not move or shift when the user navigates the website.

Code Example:

document.addEventListener('mousemove', function(event) {
    console.log(`Window-relative position: X = ${event.clientX}, Y = ${event.clientY}`);
    console.log(`Document-relative position: X = ${event.pageX}, Y = ${event.pageY}`);
});

In this code, every time the mouse moves, it logs the current mouse position relative to the window (viewport) and the document (page including scroll).

A double mouse click has the unintended consequence of selecting that text. Is there a method to disable this particular behavior?​

View Answer:
Interview Response: Yes, you can prevent text selection caused by double-clicking using 'event.preventDefault()' inside the 'dblclick' event handler.

Code Example:

<!-- Before... -->

<b ondblclick="console.log('Click!')" onmousedown="return false"> Double-click me </b>

<!-- ...After -->

Can you block text or image copying in a browser document?​

View Answer:
Interview Response: Yes, you can block text or image copying by calling 'event.preventDefault()' in the JavaScript 'copy' event handler attached to the document.

Alternative Response: Yes, if we want to disable selection to protect our page content from copy-paste by the user, we can use oncopy event and set it to false. This approach doesn’t restrict the user from accessing the page's HTML source, but it does make it more difficult.

Code Example:

<div oncopy="console.log('Copying forbidden!'); return false">
  Dear user, The copying is forbidden for you. If you know JS or HTML, then you
  can extract everything from the page source.
</div>

What does 'event bubbling' mean in the context of mouse events?​

View Answer:
Interview Response: Event bubbling with mouse events refers to the process where an event propagates upward through the DOM, starting from the element where the event occurred to the root element.

What is the use of the 'event.preventDefault()' method in mouse events?​

View Answer:
Interview Response: It's used to stop the browser's default action triggered by a mouse event.

Can you explain what 'contextmenu' event is?​

View Answer:
Interview Response: The 'contextmenu' event is triggered when the right mouse button is clicked (before the context menu is displayed).

Code Example:

document.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // Prevents the default context menu from appearing
    console.log('Context menu was triggered');
});

In this code, when the user right-clicks on the document, the default context menu is prevented from appearing, and the message 'Context menu was triggered' is logged to the console. You can perform custom actions or show a custom context menu instead of the default behavior.

What is the difference between 'mouseleave' and 'mouseout' events?​

View Answer:
Interview Response: The 'mouseleave' event is only triggered when the mouse pointer leaves the element, while 'mouseout' is triggered when the mouse pointer leaves the element or one of its children.

How does 'event.stopPropagation()' affect mouse events?​

View Answer:
Interview Response: The 'event.stopPropagation()' method stops the propagation of mouse events to parent elements, preventing their event handlers from being triggered, while allowing the current event's handler to execute.

Code Example:

<div id="parent">
    Parent Element
    <button id="child">Click Me!</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent element clicked');
});

document.getElementById('child').addEventListener('click', function(event) {
    event.stopPropagation(); // Stop event propagation to parent elements
    console.log('Child element clicked');
});
</script>

What do the 'clientX' and 'clientY' properties represent in a mouse event?​

View Answer:
Interview Response: The 'clientX' and 'clientY' properties in a mouse event represent the X and Y coordinates of the mouse pointer relative to the browser's viewport, excluding any scroll offsets.

Code Example:

document.addEventListener('mousemove', function(event) {
    console.log(`Mouse position: X = ${event.clientX}, Y = ${event.clientY}`);
});

Output:

"Mouse position: X = 90, Y = 84"
"Mouse position: X = 93, Y = 79"
"Mouse position: X = 95, Y = 77"
"Mouse position: X = 100, Y = 71"
"Mouse position: X = 101, Y = 68"
"Mouse position: X = 101, Y = 65"
"Mouse position: X = 101, Y = 59"

In this code, whenever the mouse moves, it logs the current X and Y coordinates of the mouse pointer relative to the viewport (browser window) in the console.

What are 'screenX' and 'screenY' properties?​

View Answer:
Interview Response: The 'screenX' and 'screenY' properties in a mouse event represent the X and Y coordinates of the mouse pointer relative to the screen or monitor, regardless of the browser window or viewport.

Code Example:

document.addEventListener('mousemove', function(event) {
    console.log(`Mouse position: X = ${event.screenX}, Y = ${event.screenY}`);
});

Output:

"Mouse position: X = 138, Y = 152"
"Mouse position: X = 141, Y = 156"
"Mouse position: X = 148, Y = 163"
"Mouse position: X = 164, Y = 179"
"Mouse position: X = 169, Y = 187"
"Mouse position: X = 169, Y = 195"

In this code, whenever the mouse moves, it logs the current X and Y coordinates of the mouse pointer relative to the screen or monitor in the console, regardless of the browser window or viewport.

Can you explain the 'pointerlockchange' event?​

View Answer:
Interview Response: The `pointerlockchange` event in JavaScript is fired when the pointer is locked/unlocked. This typically happens when the `requestPointerLock` method is called or when the user exits pointer lock.

Code Example:

document.addEventListener('pointerlockchange', function() {
  if (document.pointerLockElement) {
    console.log('The pointer is locked');
  } else {
    console.log('The pointer is not locked');
  }
});

// To request pointer lock
document.body.requestPointerLock();

In this code, the pointerlockchange event handler checks if document.pointerLockElement is set, which would indicate that the pointer is locked. If not, it's unlocked.

What does 'buttons' property represent in a mouse event?​

View Answer:
Interview Response: The buttons property in a mouse event represents the state of the buttons pressed on the mouse when the event was fired. Each button corresponds to a unique binary value.

Code Example:

document.addEventListener('mousedown', function(e) {
  if (e.buttons == 1) {
      console.log('Left button is pressed');
  } else if (e.buttons == 2) {
      console.log('Right button is pressed');
  } else if (e.buttons == 4) {
      console.log('Middle button is pressed');
  }
});

In this example, when a mousedown event is fired, the event handler checks the buttons property to see which mouse button was pressed. It logs a message depending on whether the left, right, or middle button was pressed.

What does 'detail' property represent in a 'mousedown' or 'mouseup' event?​

View Answer:
Interview Response: In a `mousedown` or `mouseup` event, the `detail` property represents the number of times the mouse button has been pressed and released on an element without the mouse pointer having moved.

Code Example:

document.addEventListener('mousedown', function(e) {
  console.log(`The mouse button was pressed ${e.detail} time(s)`);
});

document.addEventListener('mouseup', function(e) {
  console.log(`The mouse button was released ${e.detail} time(s)`);
});

In this example, when a mousedown or mouseup event is fired, the event handler checks the detail property and logs a message indicating how many times the mouse button has been pressed and released.

What is the 'auxclick' event?​

View Answer:
Interview Response: The `auxclick` event is a mouse event in JavaScript that gets fired when a non-primary mouse button (usually the middle button) is clicked on an element.

Code Example:

document.addEventListener('auxclick', function(e) {
  if (e.button === 1) {
    console.log('Middle button was clicked.');
  }
});

In this example, when an auxclick event is fired, the event handler checks if the middle mouse button was clicked and logs a message if it was. Please note that not all mice have a middle button.

What is the 'pointerId' property in a mouse event?​

View Answer:
Interview Response: In pointer events (not specifically mouse events), `pointerId` is a unique identifier for a particular pointer (like a mouse, pen, or touch contact) involved in the event.

Code Example:

document.addEventListener('pointerdown', function(e) {
  console.log(`The pointer id is ${e.pointerId}`);
});

In this example, when a pointerdown event is fired, the event handler logs the unique identifier of the pointer that triggered the event. This could be useful for distinguishing between different pointers in a multi-touch scenario, for example.

How can you detect the direction of the mouse wheel scroll?​

View Answer:
Interview Response: The `wheel` event's `deltaY` property can be used to detect the mouse wheel scroll direction in JavaScript. Positive `deltaY` indicates scrolling down, and negative means scrolling up.

Code Example:

document.addEventListener('wheel', function(e) {
  if (e.deltaY < 0) {
    console.log('Scrolled up');
  } else {
    console.log('Scrolled down');
  }
});

In this example, when a wheel event is fired, the event handler checks the deltaY property to determine the scroll direction. It logs a message depending on whether the user scrolled up or down.