<!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. Linux的段错误调试方法

    linux段错误的调试方法 相关博文: http://blog.csdn.net/htianlong/article/details/7439030 http://www.cnblogs.com/pa ...

  2. 手把手教你从购买vps到搭建一个node服务器

    要准备什么? 1.5刀 2.最好有FQ软件(可以用蓝灯) let's Go! 一.vps购买 vps可以选择digital ocean(do) 链接 ,由于是外国网站,响应比较慢,所以最好翻个墙. g ...

  3. Mysql学习笔记（六）增删改查

    PS:数据库最基本的操作就是增删改查了... 学习内容: 数据库的增删改查 1.增...其实就是向数据库中插入数据.. 插入语句 insert into table_name values(" ...

  4. PHP去除BOM头的方法

    BOM头是UTF-8来告诉编辑器:我是UTF8编码.它的编码是\xEF\xBB\xBF 但是PHP在设计之初并没有考虑到BOM头的问题,所以在编解码的时候很容易出现问题   比如今天遇到的问题,jso ...

  5. 100行JS实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  6. MySQL 备份与还原详解

    相关阅读: MySQL备份和恢复具体实施 http://www.linuxidc.com/Linux/2012-12/76257.htm MySQL备份与恢复的三种方法总结 http://www.li ...

  7. 微软开源的30个基础设施项目-C#

    .NET Compiler Platform ("Roslyn") .NET Core 5 .NET Micro Framework .NET SDK For Hadoop ASP ...

  8. Linq查询操作之投影操作

    投影操作,乍一看不知道在说啥.那么什么是投影操作呢?其实就是Select操作,名字起的怪怪的.和Linq查询表达式中的select操作是一样的.它能够选择数据源中的元素,并指定元素的表现形式.投影操作 ...

  9. Asp.Net 三层架构之泛型应用

    一说到三层架构,我想大家都了解,这里就简单说下,Asp.Net三层架构一般包含:UI层.DAL层.BLL层,其中每层由Model实体类来传递,所以Model也算是三层架构之一了,例外为了数据库的迁移或 ...

  10. .Net实现微信公众平台开发接口（三） 之 “信息回复”

    对于每一个POST请求,开发者在响应包(Get)中返回特定XML结构,对该消息进行响应(现支持回复文本.图片.图文.语音.视频.音乐).请注意,回复图片等多媒体消息时需要预先上传多媒体文件到微信服务器 ...