onmouseup 事件
JavaScript基础 2022-06-08 12:01:44小码哥的IT人生shichen
onmouseup 事件
实例
在段落上释放鼠标按钮时执行 JavaScript：
<p onmouseup="mouseUp()">Click the text!</p>
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
请点击文本！在该段落上按下鼠标按钮时，触发 mouseDown() 函数，并将文本的颜色设置为红色。 mouseUp() 函数在释放鼠标按钮时被触发，并将文本的颜色设置为绿色。
</p>
<script>
function mouseDown() {
document.getElementById("myP").style.color = "red";
}
function mouseUp() {
document.getElementById("myP").style.color = "green";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
当用户在元素上释放鼠标按钮时，发生 onmouseup 事件。
提示：与 onmouseup 事件相关的事件顺序（对于鼠标左键/中键）：
与 onmouseup 事件相关的事件顺序（对于鼠标右键）：
浏览器支持
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onmouseup | 支持 | 支持 | 支持 | 支持 | 支持 |
语法
在 HTML 中：
<element onmouseup="myScript">
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例演示如何将 "onmousedown" 和 "onmouseup" 事件分配给 p 元素。</p>
<p id="demo" onmousedown="mouseDown()" onmouseup="mouseUp()">点击我.</p>
<script>
function mouseDown() {
document.getElementById("demo").innerHTML = "The mouse button is held down.";
}
function mouseUp() {
document.getElementById("demo").innerHTML = "You released the mouse button.";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中：
object.onmouseup = function(){myScript};
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 HTML DOM 将 "mousedown" 和 "mouseup" 事件附加到 p 元素。</p>
<p id="demo">点击我.</p>
<script>
document.getElementById("demo").onmousedown = function() {mouseDown()};
document.getElementById("demo").onmouseup = function() {mouseUp()};
function mouseDown() {
document.getElementById("demo").innerHTML = "The mouse button is held down.";
}
function mouseUp() {
document.getElementById("demo").innerHTML = "You released the mouse button.";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中，使用 addEventListener() 方法：
object.addEventListener("mouseup", myScript);
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 addEventListener() 方法将 "mousedown" 和 "mouseup" 事件附加到 p 元素。</p>
<p id="demo">点击我.</p>
<script>
document.getElementById("demo").addEventListener("mousedown", mouseDown);
document.getElementById("demo").addEventListener("mouseup", mouseUp);
function mouseDown() {
document.getElementById("demo").innerHTML = "The mouse button is held down.";
}
function mouseUp() {
document.getElementById("demo").innerHTML = "You released the mouse button.";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | MouseEvent |
| 支持的 HTML 标签： | 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title> |
| DOM 版本： | Level 2 Events |
