在 JavaScript 中按下和释放鼠标左键

17 Mar 2025 | 6 分钟阅读

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

语法

下面的语法使用“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 中鼠标左键的按下和释放。

Chrome
边
火狐
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

Pressing and releasing the left mouse button in JavaScript

示例 2：带有 javascript 函数和处理程序的 basic mouseup 事件。如果按下左侧按钮，则会在网页上应用 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>

输出

下面的输出显示了左键 mouseup 函数工作后的信息。

示例 3：basic 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 函数工作后的信息。

示例 4：basic 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

输出 2

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

输出

下面的输出显示了左键 mouseup 函数工作后的信息。

输出 1

输出 2

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

输出 2

结论

鼠标左键的按下和释放事件有助于限制用户交互。它有助于用户操作与鼠标相关的 Web 和桌面开发。

下一个主题在 JavaScript 中删除字符串中的所有空格

在 JavaScript 中按下和释放鼠标左键

语法

支持的浏览器

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

在 JavaScript 中按下和释放鼠标左键

语法

支持的浏览器

示例

结论

相关帖子

JavaScript sessionStorage

Npm 更新库和 Npm 列表

JAVASCRIPT TRIGGER CLICK

Mouseover 函数在 javascript 中的用法

JavaScript 指数运算符

如何在 JavaScript 中编写函数

JavaScript 中的 mousemove 事件

如何在 JavaScript 中移除类

JavaScript 中的 indexof 和 search 之间的区别

JavaScript windows getComputedStyle() 方法

订阅 Tpoint Tech

联系信息

关注我们