onmousedown与onmouseup及onclick事件示例

最新推荐文章于 2023-07-05 23:37:25 发布

coodingcc

最新推荐文章于 2023-07-05 23:37:25 发布

阅读量3.1k

点赞数 1

分类专栏：前端文章标签：鼠标字体

本文链接：https://blog.csdn.net/cristina_song/article/details/77833591

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

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 鼠标移动时触

coodingcc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onmousedown与onmouseup及onclick事件示例

onmousedown：用户鼠标按下时触发的事件。 onmouseup:鼠标抬起时触发的事件。 onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。）示例1：鼠标按下时更换字体背景色，抬起时还原默认颜色。（onmousedown与onmouseup）<!DOCTYPE html><html><head><meta charset="utf-8" /><titl
复制链接

扫一扫

专栏目录