有些時候我們需要通過頁面來監控用戶的行為,包括鼠標操作鍵盤操作,本文章介紹的是鼠標的操作監控:
<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>