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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM