<!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的更多相关文章

  1. jsp中一个标签两种方式绑定两个click事件导致未执行的问题

    近日,在开发过程中,写了一个标签 <li id="a1" onclick="doSomething()">...</li> 在js页面中 ...

  2. 运行vs时打开一个浏览器窗口，而不是在原有窗口上打开一个标签

    1.运行vs时打开一个浏览器窗口,而不是在原有窗口上打开一个标签,结束调试时窗口又关闭了,特别麻烦. 在用swagger调试接口时,好不容易输入了测试数据,然而窗口关闭了,再次调试又得重新输入. 解决 ...

  3. gvim写html代码时如何快速地跳转到一个标签的结束位置: 终极插件: matchit.vim

    gvim写html代码时如何快速地跳转到一个标签的结束位置 参考这个vimrc的配置, 里面有一些 很好的东西, 配置很有用, 以前没有用到: http://www.cnblogs.com/wangj ...

  4. cocos2dx 某缩放的页面 CCTableView最后一个标签无法点中

    有一个二级界面,在ipad4下面放大到1.6倍,直接对最外层的CCLayer缩放的,里面包含有CCTableView.结果运行的时候无法选中到最后一个标签,无论总的标签是2个还是更多,单步调试,发现到 ...

  5. [原创]java WEB学习笔记40：简单标签概述（背景，使用一个标签，标签库的API，SimpleTag接口，创建一个自定义的标签的步骤 和简单实践）

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. 不常用但是又得有的一个标签——音频(audio)

    这几天做一个项目里面出现了H5的一个标签,音频(audio),可以说这是我第一次遇见这种标签基本上很少用的,也许是我做的项目少吧, 下面我来说一下我的思路,当然这是我自己想的,当时我想到的是如何让一个 ...

  7. selenium控制超链接在当前标签页中打开或重新打开一个标签页

    selenium控制超链接在当前标签页中打开或重新打开一个标签页 在web页面源码中,控制超链接的打开是在当前标签页还是重新打开一个标签页,是由属性target=“_black”进行控制的.如果还有属 ...

  8. jquery判断一个标签是否包含另外一个标签

    jquery判断一个标签是否包含另外一个标签 一.总结 一句话总结: jquery的find方法配合length属性:if($("#video_md_9_1").find(&quo ...

  9. python+selenium遍历某一个标签中的内容

    一.python+selenium遍历某一个标签中的内容 举个例子:我要获取列表标签<li></li>的内容 根据python+selenium定位到列表整体,使用for循环获 ...

随机推荐

  1. n 后问题

    n后问题,解决思路:假设每个皇后占一行(且第i个皇后放在第i - 1 行),依次去尝试下一个皇后该放在该行的哪一列 #include<iostream> #include<cmath ...

  2. Android 学习笔记之Volley开源框架解析（一）

    PS:看完了LGD的六场比赛...让人心酸... 学习内容: 1.Http请求的过程... 2.Volley的简单介绍...   1.Http请求...   这里只是简单的说一下Http请求的过程.. ...

  3. 探秘重编译（Recompilations）（1/2）

    这篇文章我想谈下SQL Server里一个非常重要的性能调优话题:重编译(Recompilations) .当你执行非常简单的存储过程(使用临时表)时,就会发生.今天我想奠定SQL Server里重编 ...

  4. 【Coding地址汇总】2016年沈航软工学生项目主页

    同学们把自己的coding主页链接贴在评论里,要求格式"班号+学号+coding主页链接",如: "1301+13061193 + https://coding.net/ ...

  5. dp --- 2014 Asia AnShan Regional Contest --- HDU 5074 Hatsune Miku

    Hatsune Miku Problem's Link:   http://acm.hdu.edu.cn/showproblem.php?pid=5074 Mean: 有m种音符(note),现在要从 ...

  6. [转]easyui datagrid 批量编辑和提交

    web前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg" ...

  7. C#创建服务及使用程序自动安装服务，.NET创建一个即是可执行程序又是Windows服务的exe

    不得不说,.NET中安装服务很麻烦,即要创建Service,又要创建ServiceInstall,最后还要弄一堆命令来安装和卸载. 今天给大家提供一种方式,直接使用我们的程序来安装/卸载服务,并且可以 ...

  8. DataSet与DataTable对象

    DataSet与DataTable对象 摘自:http://www.cnblogs.com/fttbfttb/articles/1509662.html DataSet对象 DataSet是ADO.N ...

  9. 以对象的方式来访问xml数据表（二）

    为什么要以对象的方式来访问xml数据表? 还记得,自己是在一次完成师兄布置的任务时接触到了xml,那时候需要用xml来作为数据文件,保存一个简单的图书管理系统的数据.于是就知道了,可以用xml文件来保 ...

  10. 使用win2d实现萤火虫粒子效果

    这几天我在做游戏的标题画面,需要实现随机飞舞的萤火虫.萤火虫会闪烁黄绿色的光,远近不同,并且飞出屏幕边界不久会自动飞回来. 我前一阵子用win2d写了个简单的游戏引擎(现在还是alpha阶段),用它可 ...