JS中的鼠标移入移除监控操作
有些时候我们需要通过页面来监控用户的行为，包括鼠标操作键盘操作，本文章介绍的是鼠标的操作监控：
<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中的鼠标移入移除监控操作的更多相关文章
- Vue2.0选中当前鼠标移入移除加样式
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 效果如gif动态图所示: 1.通过v-for遍历数组 HTML代码: <template> <div class=" ...
- Vue中通过鼠标移入移出来添加或取消class样式（active）
基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...
- js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
- JS中的函数、BOM和DOM操作
一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */ // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...
- 【第三周读书笔记】浅谈node.js中的异步回调和用js-xlsx操作Excel表格
在初步学习了node.js之后,我发现他的时序问题我一直都很模糊不清,所以我专门学习了一下这一块. 首先我们来形象地理解一下进程和线程: 进程:CPU执行任务的模块.线程:模块中的最小单元. 例如:c ...
- js中对Object对象的一些常用操作总结
前言我前面的文章,写过js中“类”与继承的一些文章.ES5我们可以通过 构造函数 或者 Object.create()等方式来模拟出js中的“类”,当然,对象呢是类的实例化,我们可以通过如下方式创建对 ...
- jquery实现鼠标移入移除背景图片切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq鼠标移入移除事件
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...
- js中的鼠标滚轮事件
## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...
随机推荐
- 3_5 生成元（UVa1583）
如果x加上x的各个数字之和得到y,就说x是y的生成元.给出n(1<=n<=100000),求最小生成元.无解输出0.例如,n=216,121,2005时的解分别为198,0,1979. 样 ...
- XMPP详解
https://www.jianshu.com/p/84d15683b61e https://www.cnblogs.com/lurenq/p/7026983.html 1. xmpp简介 XMPP ...
- Jmeter调度器小记
jmeter的调度器中[持续时间(秒)]的优先级是高于[结束时间]和[启动时间]的 举例子: 前提:[循环次数]勾选[永远] 场景1:[持续时间(秒)]设置为120S,[启动时间]设置T+1min,[ ...
- JavaScript 对象数字键特性实现桶排序
桶排序: 对象中,数字键按照升序排列.依据这一特性将数组的值作为对象的键和值存入对象实现排序 因为对象的键不重复,因此不支持数组有重复元素存在的排序场景,也可以看作是实现数组的去重排序 functio ...
- 吴裕雄 python 神经网络——TensorFlow 图像处理函数
import numpy as np import tensorflow as tf import matplotlib.pyplot as plt image_raw_data = tf.gfile ...
- 为什么ISR4K、ASR1K等设备的QoS ACL没有显示计数？
思科的ISR4K和ASR1K设备都是IOS XE的架构,它们和传统的IOS架构是不一样的. 以ISR4K为例,和一般的IOS(例如ISR G2)有所区别,他的转发更依赖硬件完成,针对NAT或QoS应用 ...
- Android、iOS与Servlet接口上传文件和JSON串的交互
package etcom.servlet; import java.io.File; import java.io.IOException; import java.sql.Connection; ...
- inode节点使用率过大处理
当发现某个分区下的inode使用率过大时,需要找到该分区下的某些目录里有哪些文件可以清理. 查找某个目录下一个月或两个月之前的文件,然后删除# find . -type f -mtime +30 |w ...
- java判断文件或文件夹是否在
public static void main(String[] args) { File file = new File("G:\\Jeff.txt"); File dir = ...
- Docker 之registry私有仓库搭建
Docker 之registry私有仓库搭建 官方提供的私有仓库docker registry用法 https://yeasy.gitbooks.io/docker_practice/reposito ...