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

<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. spark实验(二)--eclipse安装scala环境(2)

    此次在eclipse中的安装参考这篇博客https://blog.csdn.net/lzxlfly/article/details/80728772 Help->Eclipse Marketpl ...

  2. 吴裕雄 python 神经网络——TensorFlow 花瓣分类与迁移学习（4）

    # -*- coding: utf-8 -*- import glob import os.path import numpy as np import tensorflow as tf from t ...

  3. Nexus 3048的NX-OS升级方法

    1.System Software和Kick Start 与普通IOS设备不同,NX OS升级时,共有2个文件需要升级.安装,如果只安装其中一个,可能会导致设备重启后无法进入系统.这2个文件包括: N ...

  4. Nginx Rewrite域名及资源重定向!（重点）

    第一步:搭建Nginx服务 第二步:修改主配置文件 [root@ns2 ~]# vim /usr/local/nginx/conf/nginx.conf user  nginx nginx; work ...

  5. 如何为开发项目编写规范的README文件

    前言 了解一个项目,首先都是通过其Readme文件了解信息.如果你以为Readme文件都是随便写写的那你就错了.github,oschina git gitcafe的代码托管平台上的项目的Readme ...

  6. SpringMVC 配置文件详解

    HandlerMapping    处理器映射 HTTP请求被DispatcherServlet拦截后,会调用HandlerMapping来处理,HandlerMapping根据 url<=&g ...

  7. 【网摘】监控 div 的内容变化

    数据是动态加载而来,而当无数据时,提示一下暂无数据.而数据是可以动态在当前页面即时添加的,故在无数据时所做提示,需要隐藏,所以找了这个方法.成功在动态添加数据后,暂无数据的提示没有了. if($(&q ...

  8. hadoop程序理解

    1.利用hadoop的API写程序 驱动程序中利用hadoop的API,获取配置,默认会根据HADOOP_HOME环境变量指定的HADOOP主目录下/etc/hadoop加载配置文件 2.启动利用 - ...

  9. 关于and 和or的执行优先级问题分析

    题目:列出本店价低于60或者高于100.并且商品点击数大于628的商品. 按照下面两种写法,得到的结果是不同的. 第一种:结果数据中有点击数为628的记录,显然不符合题目要求. SELECTgoods ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 显示代码：变量赋值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...