onmousedown 事件
JavaScript基础 2022-06-08 12:01:13小码哥的IT人生shichen
onmousedown 事件
实例
在段落上按下鼠标按钮时执行 JavaScript：
<p onmousedown="myFunction()">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 实例。
定义和用法
当用户在元素上按下鼠标按钮时，会发生 onmousedown 事件。
提示：与 onmousedown 事件相关的事件顺序（针对鼠标左键/中键）：
与 onmousedown 事件相关的事件顺序（对于鼠标右键）：
浏览器支持
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onmousedown | 支持 | 支持 | 支持 | 支持 | 支持 |
语法
在 HTML 中：
<element onmousedown="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.onmousedown = 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("mousedown", 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 |
更多实例
完整实例【按下按钮时触发带参数的函数】：
<!DOCTYPE html>
<html>
<body>
<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
单击文本可更改颜色。按下鼠标按钮时会触发带参数的函数，释放鼠标按钮时会再次触发带有其他参数的函数。
</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
当鼠标按钮在 <p> 元素上按下时，将其颜色更改为红色。
完整实例【提示按下了哪个鼠标按钮】：
<!DOCTYPE html>
<html>
<body>
<div onmousedown="WhichButton(event)">单击此文本（使用鼠标按钮之一）
<p>
0 指定鼠标左键<br>
1 指定鼠标中键<br>
2 指定鼠标右键</p>
<p><b>注释：</b>Internet Explorer 8 及更早版本返回另一个结果：<br>
1 指定鼠标左键<br>
4 指定鼠标中键<br>
2 指定鼠标右键</p>
</div>
<script>
function WhichButton(event) {
alert("You pressed button: " + event.button)
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提醒用户按下了哪个鼠标按钮。
完整实例【提示点击的元素】：
<!DOCTYPE html>
<html>
<head>
<script>
function whichElement(e) {
var targ;
if (!e) {
var e = window.event;
}
if (e.target) {
targ = e.target;
} else if (e.srcElement) {
targ = e.srcElement;
}
var tname;
tname = targ.tagName;
alert("You clicked on a " + tname + " element.");
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>单击文档中的某处。警报框将提醒您单击的元素的名称。</p>
<h3>这是标题</h3>
<img border="0" src="/i/photo/smile.gif" alt="Smiley" width="128" height="128">
<p>这是段落。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提醒用户单击的元素的名称。
