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

<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. buuctf——easyjava

    虽然学过Javaweb的开发,但没好好学,所以对Javaweb了解不深 菜的真实 WEB-INF/web.xml泄露 贴一个别人的源码泄露总结ctf/web源码泄露及利用办法[总结中] WEB-INF ...

  2. PyQt5设置图片格式及动画

    1.缩放图片'''使用QImage.Scale(width,height)方法可以来设置图片'''from PyQt5.QtCore import *from PyQt5.QtGui import * ...

  3. ubuntu 修改和配置ip

    因为主机里面有好多个虚拟机,但是ip就一个,最近开了一个win的虚拟机,真好玩是不?所以就暂时把ubunut的ip给改了,要不冲突,哎呀,不说多了,上图, 1.修改配置文件blacklist.conf ...

  4. 三分钟让你秒懂.Net生态系统

    提到.Net的时候,大多数人的第一反应可能就是.Net Framework和Visual Studio..Net Framework的第一个版本发布与2002年2月13日,这对于科技发展日新月异的时代 ...

  5. 吴裕雄--天生自然Numpy库学习笔记：NumPy 副本和视图

    副本是一个数据的完整的拷贝,如果我们对副本进行修改,它不会影响到原始数据,物理内存不在同一位置. 视图是数据的一个别称或引用,通过该别称或引用亦便可访问.操作原有数据,但原有数据不会产生拷贝.如果我们 ...

  6. 802.1X高级配置

    部署VLAN和ACLCisco Catalyst交换机(认证方)和Cisco ACS(认证服务器)具备动态分配VLAN或者ACL的能力.Cisco ACS可以将某个用户分配给指定的VLAN,或应用AC ...

  7. Vue父组件主动获取子组件的数据和方法

    Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131

  8. 遍历 Map 的方式

    今天获取到一个Map 集合,想循环遍历出内容,突然发现忘记如何遍历Map,平时用的太少. Map 集合的内容是 Key , Value 键值对形式存储 第一种是 for 循环遍历 Map<Str ...

  9. PCB设计要点

    pcb要点 : 2014年8月5日 13:04 一地线设计 1.1分类模拟地.数字地.外壳地.系统大地 1.2接地方式:单点接地(f<1MHZ,避免环流),多点接地(f>10MHZ降低地线 ...

  10. Update(Stage4)：scala补充知识

    1.惰性加载: 在企业的大数据开发中,有时候会编写非常复杂的SQL语句,这些SQL语句可能有几百行甚至上千行.这些SQL语句,如果直接加载到JVM中,会有很大的内存开销.如何解决? 当有一些变量保存的 ...