JavaScript 按下和释放左键的代码

按下和释放左键是鼠标事件函数的一个重要功能。左侧的按钮用于执行许多功能，但用户也可以使用右侧的按钮来执行相同的功能。我们可以通过按钮点击和释放来限制鼠标事件。

语法

以下语法展示了使用”onmousedown”函数的鼠标或鼠标按钮按下事件。

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

以下语法显示使用”onmouseup”函数的鼠标或鼠标按钮释放并向上移动事件。

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

支持的浏览器

鼠标事件函数支持许多浏览器。通过在javascript中按下和释放左键鼠标，支持以下浏览器。

Crome
Edge
Firefox
Opera
Safari
IE

示例

鼠标事件与不同的方法和不同的事件一起工作。我们可以为左键应用任何功能，通过mouseup和mousedown函数。

示例1： 基本的mouseup事件使用html标签和javascript函数。我们可以在带有输入事件数据的div标签上使用mouseup函数。这里，函数显示鼠标的左、右和中间按钮的按下操作的值。

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

输出

以下输出显示在单击鼠标左键后使用mouseup函数的信息。

输出1

JavaScript 按下和释放左键的代码

示例2： 鼠标松开事件的基本操作，使用JavaScript函数和处理程序。如果按下左侧按钮，则将应用CSS样式到网页上；否则，在网页上显示通知。

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

输出

下面的输出显示了在鼠标松开左键后的信息。

JavaScript 按下和释放左键的代码

示例3： 基本的mousedown事件使用HTML标签和JavaScript函数。在这里，我们可以在带有数据的div标签上使用mousedown函数。在这里，JavaScript函数展示了鼠标左键、右键和中键按下的事件。

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

输出

以下输出显示在点击鼠标左键后执行mouseup函数的信息。

JavaScript 按下和释放左键的代码

示例4： 使用基本的mousedown事件来通过javascript函数和处理程序按下按钮。如果按下左侧按钮，则在网页上应用css样式；否则，在网页上显示通知。

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

输出

以下输出显示了在按下左键后使用mousedown函数后的信息。

输出1

JavaScript 按下和释放左键的代码

输出2

JavaScript 按下和释放左键的代码

示例5： 使用按钮事件按下和释放左键。

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

输出

下面的输出显示在左键鼠标抬起函数处理后的信息。

输出1

JavaScript 按下和释放左键的代码

输出2

JavaScript 按下和释放左键的代码

示例6： 按下并释放左键，使用mousedown和mouseup事件。它用于帮助使用html标签和JavaScript函数操作流程。

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

输出

下面的输出显示了在左按钮上使用mouseup函数后的信息。

输出1

JavaScript 按下和释放左键的代码