The action of pressing and releasing the left mouse button is a crucial aspect of the mouse event functionality. The left button serves multiple purposes, while users may also utilize the right button to perform the same tasks. It is possible to limit the mouse event behavior based on the actions of clicking and releasing the button.
Syntax
- The syntax provided below illustrates the event triggered by a mouse click or the pressing of a mouse button, utilizing the "onmousedown" function.
- The syntax below illustrates the event for releasing the mouse or mouse button and moving upwards by utilizing the "onmouseup" function.
<div id = "demoDIV" onmousedown = "function_name(event)"> </div>
<script>
function function_name(event){
var button_val = event.button;
//output shows 0 to press the left button
console.log(button_val);
}
</script>
<div id = "demoDIV" onmouseup = "function_name(event)"> </div>
<script>
function function_name(event){
var button_val = event.button;
//output shows 0 to press the left button
console.log(button_val);
}
</script>
Support browsers
The mouse event function supports many browsers. The following browsers are supported by pressing and releasing the left mouse button in javascript.
- Crome
- Edge
- Firefox
- Opera
- Safari
Examples
Mouse events operate through various methods and distinct events. We can implement any desired functionality utilizing the mouseup and mousedown functions specifically for the left mouse button.
Example 1: The fundamental mouseup event employs the HTML tag along with a JavaScript function. In this instance, we can apply the mouseup function to the div tag utilizing the input event data. This function is designed to display the values corresponding to the presses of the left, right, and middle buttons of the mouse.
<!DOCTYPE html>
<html>
<head>
<title> Pressing and releasing the left mouse button in JavaScript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas1 {
color: red;
}
</style>
</head>
<body>
<h2> Realase the left side button event of the mouse in javascript </h2>
<p id = "datas"> </p>
<p id = "datas1"> </p>
<div id = "demoDIV" onmouseup = "demoDIVFunction(event)">
The javascript mouseup event is used to release the button of the mouse event used with the mouse movement event on the web page. When we press and release the mouse button, the event shows the button's information and operation functionality on the page.<br>
0 = Represents left mouse button<br>
1 = Represents middle mouse button<br>
2 = Represents right mouse button
</div>
<script>
function demoDIVFunction(event) {
var button_val = event.button;
alert(button_val);
document.getElementById("datas1").innerHTML = "button Released : "+button_val;
document.getElementById("datas").innerHTML = "JavaScript Button release function activates successfully!!!";
document.getElementById("demoDIV").style.width = "410px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}
</script>
</body>
</html>
Output
The subsequent output displays details after executing the mouseup function for the left mouse button.
Output1
Example 2: The fundamental mouseup event utilizing a JavaScript function along with its handler. When the left mouse button is clicked, a CSS style is applied to the webpage; if not, a message is displayed on the webpage.
<!DOCTYPE html>
<html>
<head>
<title> Pressing and releasing the left mouse button in JavaScript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas1 {
color: red;
}
</style>
</head>
<body>
<h2> Realase the left side button event of the mouse in javascript </h2>
<p id = "datas"> </p>
<p id = "datas1"> </p>
<div id = "demoDIV" onmouseup = "demoDIVFunction(event)">
The javascript mouseup event is used to release the button of the mouse event used with the mouse movement event on the web page. When we press and release the mouse button, the event shows the button's information and operation functionality on the page.
</div>
<script>
function demoDIVFunction(event) {
var button_val = event.button;
alert(button_val);
if(button_val == 0){
document.getElementById("datas1").innerHTML = "Left side mouse button works successfully!";
document.getElementById("datas").innerHTML = "JavaScript Mouse up function activates successfully!!!";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.width = "400px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}else{
document.getElementById("datas1").innerHTML = "Please Release the Left side mouse button!";
}
}
</script>
</body>
</html>
Output
The subsequent output displays details following the execution of the mouseup function for the left mouse button.
Example 3: The fundamental mousedown event utilizes the HTML tag in conjunction with a JavaScript function. In this scenario, we can apply the mousedown function to the div tag containing the data. The JavaScript function is designed to capture the events corresponding to the left, right, and middle button clicks of the mouse.
<!DOCTYPE html>
<html>
<head>
<title> Pressing and releasing the left mouse button in JavaScript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas1 {
color: red;
}
</style>
</head>
<body>
<h2> Realase the left side button event of the mouse in javascript </h2>
<p id = "datas"> </p>
<p id = "datas1"> </p>
<div id = "demoDIV" onmousedown = "demoDIVFunction(event)">
The javascript mousedown event is used to press the button of the mouse event used with the mouse movement event on the web page. When we press and release the mouse button, the event shows the button's information and operation functionality on the page.<br>
0 = Left mouse button<br>
1 = Middle mouse button<br>
2 = Right mouse button
</div>
<script>
function demoDIVFunction(event) {
var button_val = event.button;
alert(button_val);
document.getElementById("datas1").innerHTML = "button pressed : "+button_val;
document.getElementById("datas").innerHTML = " JavaScript Mouse down or Press function activates successfully!!!";
document.getElementById("demoDIV").style.width = "400px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}
</script>
</body>
</html>
Output
The subsequent output illustrates the details obtained after executing the mouseup function for the left mouse button.
Example 4: The fundamental mousedown event utilized for pressing the button through a JavaScript function and its corresponding handler. When the left mouse button is clicked, a CSS style is applied to the web page; if not, a notification is displayed on the web page.
<!DOCTYPE html>
<html>
<head>
<title> Pressing and releasing the left mouse button in JavaScript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas1 {
color: red;
}
</style>
</head>
<body>
<h2> Press the left side button event of the mouse in javascript </h2>
<p id = "datas"> </p>
<p id = "datas1"> </p>
<div id = "demoDIV" onmousedown = "demoDIVFunction(event)">
The javascript mousedown event is used to press the mouse's left button. The mouse event uses with the mouse movement event on the web page.
</div>
<script>
function demoDIVFunction(event) {
var button_val = event.button;
alert(button_val);
if(button_val == 0){
document.getElementById("datas1").innerHTML = "Left side mouse button works successfully!";
document.getElementById("datas").innerHTML = "JavaScript Mouse down or Press function activates successfully!!!";
document.getElementById("demoDIV").style.width = "410px";
}else{
document.getElementById("datas1").innerHTML = "Please Press the Left side mouse button!";
}
}
</script>
</body>
</html>
Output
The subsequent output displays details following the execution of the mousedown function for the left mouse button.
Output1
Output2
Example 5: activating and deactivating the left button through button events.
<!DOCTYPE html>
<html>
<head>
<title> Pressing and releasing the left mouse button in JavaScript </title>
<style>
#datas1 {
color: red;
}
</style>
</head>
<body>
<h2> Pressing and releasing the left mouse button in JavaScript</h2>
<button onmousedown = "demoDIVFunction(event)" onmouseup = "demoOutputFunction(event)">
click here.
</button>
<p id = "datas"> </p>
<p id = "datas1"> </p>
<script>
function demoDIVFunction(event) {
var button_val = event.button;
if(button_val == 0){
document.getElementById("datas1").innerHTML = "button pressed : "+button_val;
}
}
function demoOutputFunction(event) {
var button_val = event.button;
if(button_val == 0){
document.getElementById("datas1").innerHTML = "button relesed : "+button_val;
}
}
</script>
</body>
</html>
Output
The output presented below displays details subsequent to the execution of the mouseup function for the left mouse button.
Output1
Output2
Example 6: engaging and disengaging the left mouse button through the mousedown and mouseup events. This technique aids in executing operations utilizing the HTML tag in conjunction with a JavaScript function.
<!DOCTYPE html>
<html>
<head>
<title> Pressing and releasing the left mouse button in JavaScript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> Pressing and releasing the left mouse button in JavaScript</h2>
<div id = "demoDIV" onmousedown = "demoDIVFunction(event)" onmouseup = "demoOutputFunction(event)">
The javascript mousedown and mouseup events are used to press and release the mouse button used with the mouse movement event on the web page. When we press and release the mouse button, the event shows the button's information and operation functionality on the page.
</div>
<p id = "datas"> </p>
<p id = "datas1"> </p>
<script>
function demoDIVFunction(event) {
var button_val = event.button;
if(button_val == 0){
document.getElementById("datas").innerHTML = " JavaScript Mouse Press the left button to activate function successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}
}
function demoOutputFunction(event) {
var button_val = event.button;
if(button_val == 0){
document.getElementById("datas").innerHTML = " JavaScript Mouse Release the left button to activate function successfully!!!";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}
}
</script>
</body>
</html>
Output
The subsequent output displays details after executing the mouseup function for the left mouse button.
Output1
Output2
Conclusion
Clicking and releasing the left button of the mouse event serves to limit user engagement. This functionality aids users in navigating applications related to mouse interactions in both web and desktop development environments.