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

<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. 实现简单HttpServer案例

    <html> <head> <title>第一个表单</title> </head> <body> <pre> me ...

  2. jdk动态代理和cglib动态代理底层实现原理详细解析(cglib动态代理篇)

    代理模式是一种很常见的模式,本文主要分析cglib动态代理的过程 1. 举例 使用cglib代理需要引入两个包,maven的话包引入如下 <!-- https://mvnrepository.c ...

  3. android studio 导入主题设置，代码风格（附带eclipse 主题代码样式）

    在这里我最想说的,android studio默认主题样式,太low.不适合长时间写代码,看代码颜色不好识别,相对于背景的代码样式,我都不想吐槽了.还是网上下载主题代码样式导入样式.在这里我推荐 Su ...

  4. 通过UA实现手机端电脑端的分离！(重点)

    实现Nginx区分PC和手机访问不同的网站是物理上完全隔离的两套网站(一套手机端.一套pc端) 这样带来的好处pc端和移动端的内容可以不一样,移动版网站不需要包含特别多内容.只要包含必要的文字和较小的 ...

  5. nyoj 24

    素数距离问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 现在给出你一些数,要求你写出一个程序,输出这些整数相邻最近的素数,并输出其相距长度.如果左右有等距离长度 ...

  6. 大数据篇：MapReduce

    MapReduce MapReduce是什么? MapReduce源自于Google发表于2004年12月的MapReduce论文,是面向大数据并行处理的计算模型.框架和平台,而Hadoop MapR ...

  7. a链接内容过长，换行

    上图为溢出情况,此情况均为 英文或数字,但亲测,中文也可正常换行. 添加   word-wrap: break-word;  后,正常换行. 若不希望换行,设为  white-space: nowra ...

  8. 当在命令行中执行virtualenv venv时报此错误：'utf-8' codec can't decode byte 0xd5 in position 38: invalid continuation by

    1.windows中安装虚拟环境virtualenv时, 当在命令行中执行virtualenv venv时报此错误:'utf-8' codec can't decode byte 0xd5 in po ...

  9. unity优化-内存(网上整理)

    内存优化内存的开销无外乎以下三大部分:1.资源内存占用:2.引擎模块自身内存占用:3.托管堆内存占用.在一个较为复杂的大中型项目中,资源的内存占用往往占据了总体内存的70%以上.因此,资源使用是否恰当 ...

  10. vue element 时间选择器设置禁用日期

    在 el-date-picker 组件中有一个 picker-options 属性 disabledDate 可以设置日期的可选范围 <el-date-picker v-model=" ...