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

<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. 迭代器对象numpy.nditer在数组上进行迭代——修改数组的值

    nditer对象有另一个可选参数op_flags,默认情况下,nditer将视待迭代遍历的数组为只读对象(read-only),为了在遍历数组的同时,实现对数组元素值得修改,必须指定op_flags= ...

  2. Django 中的时区

    Django 中的时区 在现实环境中,存在有多个时区.用户之间很有可能存在于不同的时区,并且许多国家都拥有自己的一套夏令时系统.所以如果网站面向的是多个时区用户,只以当前时间为标准开发,便会在时间计算 ...

  3. 解决CentOS下boost安装后不能使用的问题

    先说一说整个经历. 因为之前没有注意到gcc4.8.5比较旧,就已经安装好boost了,当时已经可以使用了,后来发现gcc太老了,一些软件安装需要比较新的gcc支持,所以决定升级gcc,结果boost ...

  4. [C++基本语法:从菜鸟变成大佬系列，就像1，2，3那么简单](七):C++的修饰符

    修饰符是什么? C++允许char,int和double数据类型在它们之前有修饰符.修饰符用于改变基本类型的含义,以便更精确地满足各种情况的需要. 这里列出了数据类型修饰符: signed unsig ...

  5. subprocess.run()用法python3.7

    def run(*popenargs, input=None, capture_output=False, timeout=None, check=False, **kwargs): "&q ...

  6. Centos6.X创建Oracle用户

    第一步:创建数据表空间 第二步:创建临时表空间 第三步:创建用户并指定表空间 第四步:给用户授予权限 1.创建数据表空间 格式: create tablespace 表间名 datafile ‘数据文 ...

  7. 五年C语言程序员，是深耕技术还是走管理？

    从进入程序员行列开始(2013年6月),到现在为止(2019年2月),已经有五年半了.    一路波折,已经从无知菜鸟走到了意识觉醒的老鸟了.    薪资变化情况如下: 2013年:2000元/月 ( ...

  8. UDP通讯代码

    UDP客户端代码: import socket # 创建套接字 socket.AF_INET:IPV4 socket.SOCK_DGRAM:UDP协议 udp_client=socket.socket ...

  9. UIKit框架使用总结--看看你掌握了多少

    一.经常使用的,基本就是每次项目迭代都需要使用的 UIView.UILabel.UIImage.UIColor.UIFont.UIImageView.UITextField.UIButton. UIS ...

  10. Plastic Sprayer Manufacturer - How Does The Sprayer Work?

    The Plastic Sprayers Manufacturer   stated that the sprayer is a very useful type of machine and a g ...