<!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. 解决msgfmt无法使用的问题

    参考: http://blog.sina.com.cn/s/blog_4fb490ff0100csne.html http://linux.die.net/man/1/msgfmt http://pa ...

  2. adaboost原理和实现

    上两篇说了决策树到集成学习的大概,这节我们通过adaboost来具体了解一下集成学习的简单做法. 集成学习有bagging和boosting两种不同的思路,bagging的代表是随机森林,boosti ...

  3. Ext.NET 4.1.0 搭建页面布局

    Ext.NET目前的最新版本为4.1.0,可以从官网:ext.net上下载,具体下载网址为:http://ext.net/download/. 文件下载下来后,在\lib\目录下存在3个文件夹,分别对 ...

  4. PHP限制HTML内容中图片必须是本站的方法

    本文实例讲述了PHP限制HTML内容中图片必须是本站的方法.分享给大家供大家参考.具体实现方法如下: 1. PHP代码如下: <?php $dom = new DOMDocument; $dom ...

  5. kFreeBSD 7.0于2013/05/04发布 桌面环境 GNOME 3....

    kFreeBSD 7.0于2013/05/04发布 桌面环境 GNOME 3.4, KDE 4.8.4, Xfce 4.8, and LXDE

  6. C语言范例学习02

    第二章 指针 算是重点吧,这也是C语言的特色啊,直接访问物理存储. 重点: 指针就是一个存放它指向变量地址的变量,好绕口.   区分*在定义是与引用是的作用.   区分*.&的不同.   指针 ...

  7. 两种设计模式(1)==>>“简单工厂”

    我们以做一个计算器为例,给大家介绍简单工厂的应用: 效果: 这里我们使用 继承 ,虚方法, 简单工厂的设计模式来完成 首先,我们除了搭好窗体外,我们应该把我们的一些类准备好: 1.计算的父类Calcu ...

  8. Convert string to binary and binary to string in C#

    String to binary method: public static string StringToBinary(string data) { StringBuilder sb = new S ...

  9. CSS层次选择器温故-2

    1.层次选择器 通过HTML的DOM元素间的层次关系获取元素,层次关系包括后代.父子.相邻兄弟和通用兄弟,通过其中某类关系可以方便快捷地选定需要的元素 2.语法 3.兼容性 IE7以及以上版本 4.后 ...

  10. Hexo建博小结

    本来只写在自己的github pages中的,想一想万一有人看呢,虽然同类的文章有不少了,但有些新坑他们没填啊,姑且放出来啦... 拥有自己的博客是一个很酷的事情,但自己建站总是太麻烦了,步骤繁多,管 ...