下一个 → ← 上一个

如何在 javascript 中使用 mouseup 事件

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

mouseup 事件通过 JavaScript 功能在网页上与鼠标移动一起工作。鼠标释放事件适用于笔记本电脑鼠标，或者使用 mouseEvent 事件的单击。如果我们释放笔记本电脑上的按下按钮，则 mouseup 事件开始其处理功能。

如果鼠标事件函数 (mouseup) 在释放按下按钮后使用了被单击的鼠标按钮。它类似于 mousedown 函数，但需要完全单击。

语法

以下语法展示了使用 "onmouseup" 函数的鼠标或鼠标按钮释放和向上移动事件。

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

使用 addEventListener 事件的函数。

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

以下语法使用了带有 JavaScript 函数的 mouseup 事件。

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

支持的浏览器

鼠标事件函数支持许多浏览器。 "mouseup" 函数支持以下浏览器。

Chrome
边
火狐
Opera
Safari
IE

示例

mouseup 事件与不同的方法和不同的事件一起工作。我们可以使用它来对鼠标移动应用任何功能。

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

<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> Basic mouseup event in javascript </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmouseup = "demoDIVFunction()">
The javascript mouseup event is used with the mouse movement event on the web page. When we release the mouse button, the event and its handler operate on the page".
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.width = "400px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}
</script>
</body>
</html>

输出

以下输出显示了 mouseup 函数工作后 HTML 的更改。

How to use the mouseup event in javascript

示例 2：带有 JavaScript 函数和处理程序的“基本”mouseup 事件。我们可以使用 HTML 元素的 id 对象，并在 JavaScript 中使用该函数。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<div id = "demoDIV">
<h4> Basic mouseup event with an object in javascript </h4>
<p id = "datas"> </p>
The javascript mouseup event is used with the mouse movement event on the web page. When we release the mouse button, the event and its handler operate on the page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.onmouseup = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function with object activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "green";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}
</script>
</body>
</html>

输出

以下输出显示了 mouseup 函数工作后 HTML 的更改。

How to use the mouseup event in javascript

示例 3：mouseup 事件用于带有 JavaScript 函数及其处理程序的窗口。我们可以使用带有 mouseup 事件的 window 对象，并使用处理程序名称。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body id = "demoDIV">
<div>
<h4> Basic mouseup event with an object in javascript </h4>
<p id = "datas"> </p>
The javascript mouseup event is used with the mouse movement event on the web page. When we release the mouse button, the event and its handler operate on the page".
</div>
<script>
//The onmouseup event works with the window
window.onmouseup = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function with object activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.backgroundColor = "lightgrey";
document.getElementById("demoDIV").style.color = "yellow";
document.getElementById("demoDIV").style.width = "410px";
document.getElementById("datas").style.border = "2px dotted navy";
}
</script>
</body>
</html>

输出

以下输出显示了 mouseup 函数工作后 HTML 的更改。

How to use the mouseup event in javascript

示例 4：带有 JavaScript 函数及其处理程序的“基本”mouseup 事件。我们可以使用 HTML 元素的 id 对象，并在 JavaScript 中使用该函数。mousedown 事件在 script 标签中使用 addEventListener 事件。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> How to use the mouseup event in javascript </h2>
<p id = "datas" style="color:navy !important;"> </p>
<div id = "demoDIV">
The javascript mouseup event with the addEventListner event uses with the mouse movement event on the web page. When we release the mouse button, the event and its handler operate on the page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.addEventListener("mouseup", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function with object using 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>

输出

以下输出显示了 mouseup 函数工作后 HTML 的更改。

How to use the mouseup event in javascript

示例 5：该示例使用带有 JavaScript 函数及其处理程序的 mouseup 事件。我们可以使用 id 对象的 HTML body 标签。mousedown 事件在 script 标签中使用 addEventListener 事件。

<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body id = "demoDIV">
<h3> The mouseup event for body tag in javascript </h3>
<p id = "datas" style="color:yellow !important;"> </p>
<div>
The javascript mouseup event with the addEventListner event uses with the mouse movement event on the web page. When we release the pressed button and event handler, operate the body tag of the html page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.addEventListener("mouseup", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function with object using 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>

输出

以下输出显示了 mouseup 函数工作后 HTML 的更改。

How to use the mouseup event in javascript

下一主题JavaScript 中的 "mousemove" 事件

← 上一个下一个 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。