liaooo

标签： 点击事件

  • onmousedown与onmouseup及onclick事件示例

    • 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