极客笔记Javascript 如何使用mouseup事件
通过javascript功能，mouseup事件可以用于网页上的鼠标移动。mouseup事件适用于笔记本电脑的鼠标，或者使用鼠标事件的单击。如果我们释放笔记本的按键，那么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
- Edge
- Firefox
- Opera
- Safari
- IE
示例
mouseup事件可以与不同的方法和不同的事件一起使用。我们可以用它来应用鼠标移动的任何功能。
示例1： 基本的mouseup事件与html标签和javascript函数一起使用。在这里，我们可以在div标签上使用mouseup函数。它的功能在javascript标签中使用style标签来改变高度、颜色等。
<!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>
输出
以下输出显示在鼠标弹起函数之后对HTML的更改。
示例2： 基本的鼠标松开事件，使用JavaScript函数和处理程序。我们可以使用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 中的变化。
示例 3： 使用mouseup事件用于具有JavaScript函数和其处理程序的窗口。我们可以使用窗口对象与mouseup事件和处理程序名称。
<!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>
输出
下面的输出显示在鼠标抬起函数工作之后html的变化。
示例4： 基本的鼠标弹起事件与javascript函数及其处理程序。我们可以使用html元素id的对象并在javascript中使用该函数。鼠标按下事件使用addEventListener事件在script标签中。
<!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>
输出
下面的输出显示了在鼠标弹起函数工作后的HTML中的变化。
示例 5： 此示例使用鼠标弹起事件与JavaScript函数及其处理程序配合使用。我们可以使用HTML body标签的id获取该对象。鼠标按下事件使用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>
输出
下面的输出显示了在执行鼠标松开函数后HTML中发生的变化。
