Pressing and releasing the left mouse button in JavaScript

Pressing and releasing the left mouse button is an important feature of the mouse event function. The left side button uses for many functionalities to work, but the user uses the right side button for the same functionality. We can restrict the mouse event with the button click and release.

Syntax

The following syntax shows the mouse or mouse button press event using the "onmousedown" 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>

The following syntax shows the mouse or mouse button release and go upside event using the "onmouseup" function.

<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
IE

Examples

The mouse events work with different methods and different events. We can apply any functionality with mouseup and mousedown functions for the left button.

Example 1: the basic mouseup event uses the html tag and javascript function. Here we can use the mouseup function on the div tag with the input event data. Here, the function shows the value of the mouse's left, right, and middle button presses.

<!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 following output shows information after working the mouseup function for the left button.

Output1

Pressing and releasing the left mouse button in JavaScript

Example 2: the basic mouseup event with the javascript function and handler. If the left side button is pressed, then css style applies on the web page; otherwise, a notification shows 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> 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 following output shows information after working the mouseup function for the left button.

Example 3: the basic mousedown event uses the html tag and JavaScript function. Here we can use the mousedown function on the div tag with the data. Here, the JavaScript function shows the event of the mouse's left, right, and middle button presses.

<!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 following output shows information after working the mouseup function for the left button.

Example 4: the basic mousedown event used to press the button with the javascript function and handler. If the left side button is pressed, then css style applies on the web page; otherwise, a notification shows 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 following output shows information after working the mousedown function for the left button.

Output1

Output2

Example 5: pressing and releasing the left button using 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 following output shows information after working the mouseup function for the left button.

Output1

Output2

Example 6: pressing and releasing the left button using mousedown and mouseup events. It is used to help operate procedures using the html tag and 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 following output shows information after working the mouseup function for the left button.

Output1

Output2

Conclusion

Pressing and releasing the left side of the mouse event helps to restrict user interaction. It helps the users to operate a mouse-related web and desktop development.

Next TopicRemove All Whitespace from a String in JavaScript

← prev next →