<!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. 4、总结：基于Oracle Logminer数据同步

    最近开发Oracle数据同步功能,做了些调研和验证,这个工作过去有段时间,怕时间长了忘记,故用博客共享出来.在这系列中共写了三篇文章,第一篇是写LogMiner配置及使用,第二篇是测试了LogMine ...

  2. Erlang进程的Link机制

    这篇文章还不是最终版,有时间时,我会再来补充完善. 什么是link Erlang程序基于进程建模,进程之间的交互机制有收发消息,link和monitor.其中,收发消息通常用于正常的进程间通讯,而li ...

  3. 使用Codeblock搭建Windows下Objec-c学习环境

    学习Object-c如果使用的是Windows,一般推荐使用虚拟机,但是太重量级了,先要下载OS-X,又要下载x-code.这里推荐一种比较简便的方式,使用code-block来搭建简易的Object ...

  4. Hibernate核心类用法-使用Transaction管理事务

    一个典型的事务应该使用下面的形式 在创建完Session对象后即使用beginTransaction()启动事务 从此开始直到commit()之间的代码 都会处于同一个事务中 这两个函数之间所有的数据 ...

  5. C++中指针和引用的区别

    ①指针可以为空,引用不能为空: ②指针可以被赋值,引用必须在声明时赋值,之后不能被赋值: ③指针可以指向堆中空间,引用不能指向堆中空间,如int &p=new int; 会编译出错.

  6. 如何用参数化SQL语句污染你的计划缓存

    你的SQL语句的参数化总是个好想法.使用参数化SQL语句你不会污染你的计划缓存——错!!!在这篇文章里我想向你展示下用参数化SQL语句就可以污染你的计划缓存,这是非常简单的! ADO.NET-AddW ...

  7. python编码问题的最终分析

    python初学者,往往因为字符编码的问题而苦恼不已,本人也是阅读了大量的博客,再进行了一定的测试,基本搞清楚了编码问题的前因后果.下面一段代码是在python3.5上的,以它为例进行讲解(请忽略糟糕 ...

  8. Scrum团队成立3.0

    博客园 首页 新随笔 联系 订阅 管理 随笔 - 23  文章 - 0  评论 - 26 0428-Scrum团队成立3.0 ------------------------------3.0---- ...

  9. ADO.NET 基础

    *程序要和数据库交互要通过ADO.NET进行,通过ADO.NET就能在程序中执行SQL了,ADO.NET中提供了对各种不同数据库的统一操作接口. 1.连接SQLServer 连接字符串,程序通过链接字 ...

  10. 关于SqlServer2012本地帮助文档安装失败问题

    由于本人在前一段时间安装了SqlServer2012,安装后没有自带本地帮助文档,因为新的数据库版本微软捆绑了一个本地帮助文档查看器软件,所以在这个软件里面选择联机安装的时候,总是下载不成功,原因你们 ...