onmouseup 事件
JavaScript基础 2022-06-08 12:01:4416小码哥的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 |
