Introduction to jQuery mousedown()
The mouse down event takes place 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 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 is mostly useful for checking 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 is used to define the function to execute when calling the mousedown event. In a simple manner, it connects the mousedown event to the function.
One more syntax can be used when mousedown event triggers for the selected elements:
$(selector).mousedown()Examples to Implement jQuery mousedown()
Let us take a 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 it will be fade out 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 colour will be changed to blue.
When you click on the left side, and when the mouse is up, the background colour will become grey.
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 it will display the alert box on the page. When you click on the left side, the mouse down event will be triggered 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:
In the below output, when you click on the mouse button, the mouse down event will be triggered, and it will display the text each time when the user clicks on the button.
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:
In the above output, it will display the text saying hold the mouse key and release it. When you hold the mouse key, it will trigger the mouse down event, and when you release the mouse key, it will trigger the mouse up event.
When you click on the text, the mouse down event will be triggered, as shown in the below image.
When you release the mouse key, the mouse up event will be triggered, as shown in the below 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 below image will display the text when we have not clicked on any of the HTML elements. As shown in the below image, the second line is disappeared after clicking on the HTML document’s second line.
Conclusion
So far, we have studied about mousedown events, which can be used as an event handler function when any one of the mouse buttons, whether left, right or middle, is clicked on an HTML element. The mousedown method selects the HTML elements which are incorporated with the event handler. When the user clicks any of the mouse buttons on the content, the text will be hidden. Use the various types of examples which are explained above and alter them according to your convenience.
8 Online Courses | 5 Hands-on Projects| 28+ Hours| Verifiable Certificate of Completion
4.5
View Course
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 –
