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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值