有些时候我们需要通过页面来监控用户的行为，包括鼠标操作键盘操作，本文章介绍的是鼠标的操作监控：

<script>

window.onload = function(){

	var oDiv = document.getElementById("myDiv");

	//拖拽

	oDiv.onmousedown = function(ev){

		var ev = ev || window.event;

		var disX = ev.clientX - this.offsetLeft;

		var disY = ev.clientY - this.offsetTop;

		this.style.background = "#09C";

		document.onmousemove = function (ev){

			var ev = ev || window.event;

			oDiv.style.background = "#0C9";

			oDiv.style.left = (ev.clientX - disX) + 'px';

			oDiv.style.top = (ev.clientY - disY) + 'px';

		};

		document.onmouseup = function (){

			document.onmousemove = null;

			document.onmouseup = null;

			oDiv.style.background = "#337ab7";

		};

		return false;

	}

	//鼠标移入移出监测

	var oDiv2 = document.getElementById("myDiv2");

	oDiv2.onmouseover = function(){

		this.style.backgroundColor = "#337ab7";

		this.innerHTML = "鼠标已移入";

	}

	oDiv2.onmouseout = function(){

		this.style.backgroundColor = "#5bc0de";

		this.innerHTML = "鼠标移入移出事件监测";

	}

}

</script>

通过onmouse系列事件函数来检测鼠标的行为，在页面可视范围内的操作都可被监控到。

<body>

	<div id="myDiv">拖动我</div>

    <div id="myDiv2">鼠标移入移出事件监测</div>

</body>

JS中的鼠标移入移除监控操作的更多相关文章

  1. Vue2.0选中当前鼠标移入移除加样式

    本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 效果如gif动态图所示: 1.通过v-for遍历数组 HTML代码: <template> <div class=" ...

  2. Vue中通过鼠标移入移出来添加或取消class样式（active）

     基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...

  3. js中判断鼠标滚轮方向的方法

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

  4. JS中的函数、BOM和DOM操作

     一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */   // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...

  5. 【第三周读书笔记】浅谈node.js中的异步回调和用js-xlsx操作Excel表格

    在初步学习了node.js之后,我发现他的时序问题我一直都很模糊不清,所以我专门学习了一下这一块. 首先我们来形象地理解一下进程和线程: 进程:CPU执行任务的模块.线程:模块中的最小单元. 例如:c ...

  6. js中对Object对象的一些常用操作总结

    前言我前面的文章,写过js中“类”与继承的一些文章.ES5我们可以通过 构造函数 或者 Object.create()等方式来模拟出js中的“类”,当然,对象呢是类的实例化,我们可以通过如下方式创建对 ...

  7. jquery实现鼠标移入移除背景图片切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jq鼠标移入移除事件

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...

  9. js中的鼠标滚轮事件

    ## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...

随机推荐

  1. mysql_pw 指令 数据库创建过程

    ------------------pw_db数据库创建过程各表创建指令-------------------------- create database pw_db; #创建一个数据库use pw ...

  2. Windows下MySQL5.7版本中修改编码为utf-8

    我们新安装的MySQL数据库默认的字符是 latin1 ,所以每次新建数据库都要修改字符,非常麻烦.所以我们必须将它改成UTF8字符的. 修改方法如下: 一.修改MySQL的my.ini 首先在 \P ...

  3. DC-DC芯片

    KIS-3R33S:同步整流7V-24V转5V/3A DC-DC降压模块 稳压电源模块 效率超过LM2576

  4. 【PAT甲级】1045 Favorite Color Stripe (30 分)（DP）

    题意: 输入一个正整数N(<=200),代表颜色总数,接下来输入一个正整数M(<=200),代表喜爱的颜色数量,接着输入M个正整数表示喜爱颜色的编号(同一颜色不会出现两次),接下来输入一个 ...

  5. case语句！

    1.case 语句概述(1)case 语句的作用使用 case 语句改写 if 多分支可以使脚本结构更加清晰.层次分明.针对变量的不同取值,执行不同的命令序列.2.case 语句的结构:case 变量 ...

  6. python3 getopt用法

    python channel_builder.py -s /Users/graypn/ -d /Users/graypn/Documents -m 7 --out=report/xx.html 参数也 ...

  7. centos610安装postgresql

    1.安装仓储 安装仓库依赖: yum install https://download.postgresql.org/pub/repos/yum/reporpms/EL-6-x86_64/pgdg-r ...

  8. Spark操作MySQL，Hive并写入MySQL数据库

    最近一个项目,需要操作近70亿数据进行统计分析.如果存入MySQL,很难读取如此大的数据,即使使用搜索引擎,也是非常慢.经过调研决定借助我们公司大数据平台结合Spark技术完成这么大数据量的统计分析. ...

  9. maven热部署

    1.启动tomcat 2.修改 tomat/conf/tomcat-users.xml   配置用户名.密码.角色       manager-gui:图形界面的权限(调试时配置)       man ...

  10. 测试者出的APP测试面试题

    测试者出的APP测试面试题 一.开场问题:(自由发挥) 1.请自我介绍一下: 2.为什么离开上一个公司呢? 3.做测试多久了?以前做过哪些项目?你们以前测试的流程是怎样的?用过哪些测试工具? 4.你觉 ...