- onmousedown：用户鼠标按下时触发的事件。
- onmouseup:鼠标抬起时触发的事件。
- onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。）
示例1：鼠标按下时更换字体背景色，抬起时还原默认颜色。（onmousedown与onmouseup）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标按下时更换字体背景色，抬起时还原默认颜色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
function downClick(){
var dd=document.getElementById("dd");
dd.style.background="red";
}
function upClick(){
var dd=document.getElementById("dd");
dd.style.background="#abcdef";
}
</script>
</head>
<body>
<div id="dd" onmousedown="downClick();" onmouseup="upClick();" class="xuexi"></div>
</body>
</html>
示例2:鼠标点击改变字体大小（onclick）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标点击改变字体大小</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
function xuexiClick(){
var dd=document.getElementById("dd");
dd.style.fontSize=30+'px';
}
</script>
</head>
<body>
<div id="dd" onclick="xuexiClick();" class="xuexi">我爱学习，学习使我快乐/微笑</div>
</body>
</html>
另外还有以下鼠标事件：
- onMouseOver 鼠标经过时触发
- onMouseOut 鼠标移出时触发
- onMouseMove 鼠标移动时触
https://blog.csdn.net/cristina_song/article/details/77833591
发表回复