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 ...
随机推荐
- C：char类型
char字符类型 字符型变量用于存储一个单一字符,在 C 语言中用 char 表示,其中每个字符变量都会占用 1 个字节.在给字符型变量赋值时,需要用一对英文半角格式的单引号(' ')把字符括起来. ...
- Bugku - CTF加密篇之聪明的小羊（一只小羊翻过了2个栅栏）
聪明的小羊 一只小羊翻过了2个栅栏 KYsd3js2E{a2jda}
- MySQL数据库--基础简述
MySQL数据库--基础简述 1.15.1 MySQL简介 Mysql是最流行的RDBMS(Relational Database Management System:关系数据库管理系统),特别是在W ...
- Possible overdraw: Root element paints background @drawable/happy with a theme that also paints a background (inferred theme is @style/AppTheme)
安卓界面插入背景图片,当图片内存太大时,界面在切换时会加载失败,这是什么原因呢?这是设置android:background属性时发出的warning: Possible overdraw: Root ...
- 通过python调用jenkins 常用api操作
# -*- coding: utf-8 -*- import jenkins class TestJenkins(object): def __new__(cls, *args, **kwargs): ...
- vue修改当前页样式不影响公共样式的方法
在项目开发中需要对一些标签进行样式修改但是每次修改之后其他页面的样式也会跟着改变, 在网上找了很多方法都不好使后来大神告诉我一种方法很好用分享给大家. 1:首先在template标签下的第一个div中 ...
- push 、pop 、unshift 、shift
push .pop : 操作数组后面 unshift .shift :操作数组前面 push.unshift : 字母多的添加 pop .shift : 字母少的删除 push.unshift : 添 ...
- idea修改项目编码
- Lesson 16 The modern city
What is the author's main argument about the modern city? In the organization of industrial life the ...
- PAT A1114 Family Property
用并查集处理每个家庭的信息,注意标记~ #include<bits/stdc++.h> using namespace std; ; bool visit[maxn]={false}; i ...