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 ...
随机推荐
- Python中的浅复制、深复制
参考 https://docs.python.org/3/library/copy.html?highlight=copy%20copy#copy.copy https://en.wikipedia. ...
- 如何使html中的元素不被选中
有时候,为了提高用户的体验度,需要使网页中的部分内容防误操作,不被选中,比如今天的商城项目中的一个细节部分: + —号其实是a标签做的,当连续点击多次,就会使符号被选中,这样感觉起来不太好,于是查找解 ...
- Ubuntu各个版本的镜像下载地址
http://mirrors.melbourne.co.uk/ubuntu-releases/
- Python结合Pywinauto 进行 Windows UI 自动化
转:Python结合Pywinauto 进行 Windows UI 自动化 https://blog.csdn.net/z_johnny/article/details/52778064 说明:Pyw ...
- ElasticSearch学习记录 - 命令示例
GET /searchfilmcomments/searchfilmcomments/_search { "query": { "match_all": {} ...
- 有个网站秒破mdb访问密码
http://tools.bugscaner.com/crackmdb/网站
- 基于springboot通过注解AOP动态切换druid多数据源--mybatis
控制于接口之上: 开始:demo地址 在lsr-core-base中 自定义注解: /** * @Description: 数据源切换注解 * @Package: lsr-microservice ...
- 从蜘蛛侠到仙剑，为何知名IP都要开发VR游戏？
去年3月底斯皮尔伯格指导的<头号玩家>上映,为全球玩家和影迷塑造出一个庞大.刺激而又真实无比的虚拟游戏世界--"绿洲".电影上映后,在人们感叹斯皮尔伯格旺盛的艺术想象力 ...
- mcast_get_if函数
#include <errno.h> int sockfd_to_family(int); int mcast_get_if(int sockfd) { switch (sockfd_to ...
- 「CF197B Limit」
题目撞名 题目大意: 给出两个函数 \(P(x),Q(x)\). \(P(x)=a_0 \times x^N+a_1 \times x^{N-1}+a_2 \times x^{N-2} \cdots ...