Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

jquery
communitycreator

What is the mousedown() method in jQuery?

Shubham Singh Kshatriya

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

The mousedown() method triggers the mousedown event when the mouse pointer is over a selected element and the mouse button is pressed. It is a short-hand of the on('mousedown', eventHandler) event.

Syntax

$(selector).mousedown(function());

Parameters

This method accepts only one parameter, which is a function invoked when triggered by the mousedown() method.

Code example

Let’s look at the code below:

Implementation of mousedown() method

Code explanation

In the HTML tab:

  • Line 6: We create a div with id="content".
  • Line 7: We import the jQuery script.

In the JavaScript tab:

  • Line 4: We attach the mousedown() method on the element with the id of content ( "#content").
  • Line 6: We use the css() method to change the background color of that element ( "#content") when mousedown() is invoked.
  • Lines 10 to 15: We create a function, randomColor that generates a random color and returns it.

Output

The mousedown() method is invoked once we move the mouse pointer over the square and press the mouse button. As a result, the background color of the square changes.

RELATED TAGS

jquery
communitycreator

CONTRIBUTOR

Shubham Singh Kshatriya

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring