如何在 javascript 中使用 mousedown 事件

2025年3月18日 | 阅读 5 分钟

mousedown 事件利用 Javascript 功能在网页上处理鼠标移动。mousedown 事件适用于笔记本鼠标或单击鼠标。如果我们按下笔记本上的按钮，mousedown 事件将开始其处理功能。

语法

以下语法使用“onmousedown”函数显示鼠标或鼠标按钮按下事件。

<div id = "demoDIV" onmousedown = "function_name()"> </div>
<script>
function function_name(){
//write code here!
}
</script>

以下语法使用 addEventListener 事件通过“mousedown”函数显示鼠标或鼠标按钮按下事件。

<script>
object.addEventListener("mousedown", function_name);
</script>

以下语法使用带有 Javascript 函数的 mousedown 事件。

<script>
Object.onmousedown = function_name;
</script>

示例

给出的示例显示了具有功能的 mousedown 事件。

示例 1： 使用 html 标签和 Javascript 函数的基本 mousedown 事件。在这里，我们可以在 div 标签上使用 mousedown 函数。它的函数在带有 style 标签的 javascript 标签中使用，用于更改高度、颜色等。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mousedown event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> How to use the mousedown event in javascript </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmousedown = "demoDIVFunction()">
The javascript mousedown event is the mouse event to navigate the html web page. When we press the mouse button, "onmouseevent and its handler operate on the page".
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse down Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "25px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "1px solid black";
}
</script>
</body>
</html>

输出

以下输出显示了 mousedown 函数工作后的网页。

How to use the mousedown event in javascript

示例 2： 使用 Javascript 函数和处理程序的 mousedown 事件。我们可以使用 html 元素 ID 的对象并在 Javascript 中使用该函数。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mousedown event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body id = "demoDIV">
<h2> How to use the mousedown event in javascript </h2>
<p id = "datas" style="color:red !important;"> </p>
<div>
The javascript mousedown event is the mouse event to navigate the html web page. When we press the mouse button, "onmouseevent and its handler operate on the page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.onmousedown = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse down Method activates successfully!!!";
document.getElementById("demoDIV").style.height = "245px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "2px solid green";
}
</script>
</body>
</html>

输出

以下输出显示了 mousedown 函数工作后的网页。

示例 3： mousedown 事件用于 Windows，并带有 Javascript 函数和处理程序。我们可以将 window 对象与 mousedown 事件一起使用，并指定处理程序名称。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mousedown event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body id = "demoDIV">
<h2> How to use the mousedown event in javascript </h2>
<p> We can click anywhere on the page </p>
<p id = "datas" style="color:red !important;"> </p>
<div>
The javascript mousedown event is the mouse event to navigate the html web page. When we press the mouse button, "onmouseevent and its handler operate on the page".
</div>
<script>
//The onmousedown event works with the window
window.onmousedown = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse down Method activates successfully!!!";
document.getElementById("demoDIV").style.backgroundColor = "lightgrey";
document.getElementById("demoDIV").style.fontSize = "12px";
document.getElementById("demoDIV").style.color = "yellow";
document.getElementById("demoDIV").style.border = "2px solid green";
}
</script>
</body>
</html>

输出

以下输出显示了 mousedown 函数工作后的网页。

示例 4： 使用 Javascript 函数和处理程序的 mousedown 事件。我们可以使用 html 元素 ID 的对象并在 Javascript 中使用该函数。mousedown 事件在 script 标签中使用 addEventListener 事件。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mousedown event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> How to use the mousedown event in javascript </h2>
<p id = "datas" style="color:red !important;"> </p>
<div id = "demoDIV">
The javascript mousedown event is the mouse event to navigate the html web page. When we press the mouse button, "onmouseevent and its handler operate on the page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.addEventListener("mousedown", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse down Method with addEventListner event activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "21px";
document.getElementById("demoDIV").style.color = "white";
document.getElementById("demoDIV").style.backgroundColor = "grey";
document.getElementById("demoDIV").style.border = "2px dotted blue";
}
</script>
</body>
</html>

输出

以下输出显示了 mousedown 函数工作后的网页。

示例 5： 该示例使用带有 Javascript 函数及其处理程序的 mousedown 事件。我们可以使用 html body 标签的对象（通过 ID）。mousedown 事件在 script 标签中使用 addEventListener 事件。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mousedown event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body id = "demoDIV">
<h2> How to use the mousedown event in javascript </h2>
<p id = "datas" style="color:red !important;"> </p>
<div>
The javascript mousedown event is the mouse event to navigate the html web page. When we press the mouse button, "onmouseevent and its handler operate on the page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.addEventListener("mousedown", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse down Method with addEventListner event activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "21px";
document.getElementById("demoDIV").style.color = "white";
document.getElementById("demoDIV").style.backgroundColor = "black";
document.getElementById("demoDIV").style.border = "2px dotted blue";
}
</script>
</body>
</html>

输出

以下输出显示了 mousedown 函数工作后的网页。

结论

当我们按下鼠标按钮但不释放按钮时，mousedown 事件就会生效。我们可以将其用于鼠标用户的应用程序并在网页上应用功能。这对笔记本用户、台式机和其他鼠标应用程序来说都很简单。

下一主题如何在 Javascript 中使用 mouseup 事件

← prev next →

如何在 javascript 中使用 mousedown 事件

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 中使用 mousedown 事件

语法

示例

结论

相关帖子

JavaScript 中的柯里化 (Currying)

JavaScript Endswith() 函数

创建 JavaScript 倒计时计时器

JAVASCRIPT TRIGGER CLICK

JavaScript 函数用于检查数组是否为空

JavaScript 中的涟漪效果

JavaScript Blob

使用 Filterizr.js 进行可过滤的图库

Mouseout 事件在 javascript 中的用法

JavaScript 中的事件冒泡和捕获

订阅 Tpoint Tech

联系信息

关注我们

教程