Updated June 29, 2023
Introduction to jQuery mousedown()
The mouse down event occurs when the selected element presses the left mouse button downwards, and the jQuery mousedown() method activates the mouse down event or binds a function to operate when an event occurs in the mouse down. Using this event handler, we could do any operations. It’s generally easier to use the click event if we don’t know that the mousedown event is optimal for a specific case. The mouse-down approach is often used in conjunction with the mouseup() process. Such an event helps check that the primary button initiates a drag operation; if missed, unusual results occur when the user tries to use a context menu.
Syntax:
The below syntax is for attaching a function to the mousedown event:
$(selector).mousedown(function)In the above syntax, the function allows an optional single-parameter function. This defines the function to execute when calling the mousedown event. Simply, it connects the mousedown event to the function.
One more syntax can be used when a mousedown event triggers for the selected elements:
$(selector).mousedown()Examples to Implement jQuery mousedown()
Let us look at a few examples to understand the usage and implementation.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery Mousedown Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#heading").mousedown(function(){
$( "div" ).text( "The mouse event has been triggered!!!" ).show().fadeOut( 2000 );
});
});
</script>
</head>
<body>
<h2 id="heading">Click on this heading...mouse event will get triggered...</h2>
<div></div>
</body>
</html>Output:
In the above output, when you click on the line of text, the mouse-down event will be triggered and fade from the HTML page in 2 seconds.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery Mousedown Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#heading").mousedown(function(){
$("#heading").css("background-color", "blue");
});
$("#heading").mouseup(function(){
$("#heading").css("background-color", "grey");
});
});
</script>
</head>
<body>
<span id = "heading">Press down the mouse left button on this text...</span>
<div></div>
</body>
</html>Output:
When you click on the text line in the above output, the mouse-down event will be triggered, and its background color will be changed to blue.
The background color will become grey when you click on the left side and when the mouse is up.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title>jquery Mousedown Demo</title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("div").mousedown(function() {
alert("The left mouse key has been pressed... !!!");
});
});
</script>
<style>
.heading {
width: 150px;
height: 30px;
font-weight: 300;
border: 1px solid grey;
padding: 30px;
}
</style>
</head>
<body>
<!-- click on the button and alert box will get appear-->
<div class="heading">Welcome to EDUCBA.. !!!</div>
</body>
</html>Output:
In the above output, when you click on the line of text, the mouse-down event will be triggered and display the alert box on the page. When you click on the left side, the mouse-down event will trigger in the alert box.
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery Mousedown Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(() => {
$(".heading").mousedown(function () {
$(this).after("<p style=\"color:#F9AD69;\"> Welcome to EDUCBA.. !!!... !!!</p>");
});
});
</script>
</head>
<body>
<div class = "heading">Click on the mouse button to see the mouse down event ...</div>
<div></div>
</body>
</html>Output:
Whenever the user clicks the mouse button in the output below, it triggers the mouse-down event and displays the text.
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
<title>jquery Mousedown Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").mouseup(function(){
$( this ).text("This is mouse up event, got triggered...");
});
$("div").mousedown(function(){
$( this ).text("This is mouse down event, got triggered...");
});
});
</script>
<style>
.heading
{
padding:6px;
text-align:center;
background-color:#F1D9C3;
border:solid 1px red;
}
</style>
</head>
<body>
<div class="heading">Click on this box, hold the mouse key and release it after sometime... !!!</div>
</body>
</html>Output:
The above output will display the text saying to hold the mouse key and release it. Holding the mouse key will trigger the mouse down event, and when you release the mouse key, it will trigger the mouse up event.
Clicking on the text will trigger the mouse-down event, similar to the image below.
Reaching the mouse button activates the mouse-up event, as shown in the provided image.
Example #6
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery Mousedown Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".mytext").mousedown(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Welcome to EDUCBA...</p>
<span class="mytext">Click on this text, to hide the when mouse button is pressed... !!!</p>
<div> </div>
</body>
</html>Output:
The image below will display the text when we have not clicked on any HTML elements. As shown in the below image, the second line disappeared after clicking on the HTML document’s second line.
Conclusion
We can use mousedown events as an event handler function when we click any one of the mouse buttons, whether left, right, or middle, on an HTML element. The mousedown method selects the HTML elements incorporated with the event handler. The text will hide from view when the user clicks any mouse button. Modify the examples above according to your preference.
Recommended Articles
This is a guide to jQuery mousedown. Here we discuss the Introduction to jQuery mousedown() with appropriate programming. You can also go through our other suggested articles to learn more –
