jQuery Event mousedown() Method

The jQuery event mousedown() method is used to bind a handler (function) to the mousedown event, or to trigger that event on the selected element.

It triggers when the mouse button is pressed down over the selected element. Usually, this method combines with the mouseup() method to handle the mouse actions.

Syntax

Following is the syntax of the jQuery event mousedown() method −

$(selector).mousedown(function)

Parameters

This method accepts an optional parameter as a function, which is described below −

function (optional) − An optional function to execute when a mousedown event triggered.

Return Value

This method does not have any return value.

Example 1

The following program demonstrates the usage of the jQuery event mousedown() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        background-color: gray;
        color: white;
        padding: 10px;
    }
</style>
</head>
<body>
    <div>Press mouse down button on me..!</div>
    <script>
        $('div').mousedown(function(){
            alert("Mouse button pressed down...!");
        });
    </script>
</body>
</html>

Output

The following program displayed a message when the user presses down on the mouse button, an alert pop-up will appear on the browser screen −

When the user presses the mouse down button on the displayed message −

Example 2

The following is another example of the jQuery event mousedown() method. We use this method to trigger the mousedown event for a specific button −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    span{
        color: green;
    }
</style>
</head>
<body>
    <p>Click on the below displayed button..</p>
    <button>Click me!</button>
    <span></span>
    <script>
        $('button').mousedown(function(){
            $('span').text("Button pressed down...!");
        });
    </script>
</body>
</html>

Output

After running the program, a button will appear. When the button is pressed, a green message will be displayed next to the button −

When the user presses the displayed button −

Example 3

Use the mousedown() method to change the background color of the form input fields −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    input{
        width: 200px;
        padding: 10px;
    }
    button{
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Click on the below form input fields to change the different background</p>
   <form>
    <input type="text" placeholder="Username">
    <input type="password" placeholder="Password">
    <button>Login</button>
   </form>
    <script>
        $('input').mousedown(function(){
            $('input').css({"background-color" : "gray", "color": "white"});
        });
    </script>
</body>
</html>

Output

Once the above program is executed, a form with two input fields and a button is displayed. When the user clicks on an input field, the background color changes to 'gray' −

When a user clicks on an input fields −

jquery_ref_events.htm

Print Page