onmousedown,onmouseup,onclick同时应用于一个标签节点Element

2016-05-08 14:07 流浪的诗人阅读(840) 评论(0) 编辑收藏举报

<!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(){
      console.log("onmousedown");
    var woaixuexi=document.getElementById("woaixuexi");
    woaixuexi.style.background="red";
  }
  function upClick(){
      console.log("onmouseup");
    var woaixuexi=document.getElementById("woaixuexi");
    woaixuexi.style.background="blue";
  }
  function reClick(){
      console.log("onclick");
      var woaixuexi = document.getElementById("woaixuexi");
      woaixuexi.style.background="green";
  }
</script>

</head>
<body>
  <div id="woaixuexi" onmousedown="downClick();" onmouseup="upClick();" onclick="reClick();" class="xuexi"></div>
</body>
</html>

代码分析：

1、当onmousedown,onmouseup,onclick同时作用在一个元素节点上时，执行的顺序依次为onmousedown,onmouseup,onclick;

2、onmousedown：是在鼠标按下之后触发的事件；

onmouseup:鼠标抬起时触发的事件;

onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。）onclick = onmousedown + onmouseup;

刷新页面返回顶部

流浪的诗人

onmousedown,onmouseup,onclick同时应用于一个标签节点Element

About