JavaScript 鼠标跟随移动
🌙
手机阅读
本文目录结构
1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{width: 200px;height: 200px;background: orange;}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
var oDiv=document.getElementById("div1");
oDiv.onmousemove=function(event){
//直接把一个方法赋值给一个事件属性.这个方法运行的时候,浏览器会自动的给这个方法传一个对象;这个对象就是事件对象;
event=event||window.event;//IE下的事件对象,是一个全局的event;这种的是兼容写法;
event.clientX;//鼠标的X轴坐标;
event.clientY;//鼠标的Y轴坐标;
//时间有即时行;
event.type;//事件类型;只和当时发生的类型有关;只能同时处理一个事件;
this.innerHTML="X:"+event.clientX+" Y:"+event.clientY;
};
document.documentElement.onkeydown= function (event) {
event=event||window.event;
oDiv.innerHTML=event.keyCode;
}
</script>
2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{width: 200px;height: 200px;background: orange;}
#newDiv{width: 400px;height: 400px;background: red;position: absolute;color: black;}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
var oDiv=document.getElementById("div1");
var flag=1;
oDiv.onmouseover=function(event) {
if(flag){
var event=event||window.event;
var newDiv=document.createElement("div");
newDiv.id="newDiv";
newDiv.innerHTML="哈哈哈哈哈哈哈哈哈哈";
newDiv.style.left=event.clientX+"px";
newDiv.style.top=event.clientY+"px";
document.body.appendChild(newDiv);
flag=0;
}
};
oDiv.onmousemove=function(event) {
event=event||window.event;
var newDiv=document.getElementById("newDiv");
newDiv.style.left=event.clientX+10+"px";
newDiv.style.top=event.clientY+20+"px";
};
oDiv.onmouseout= function (event) {
document.body.removeChild(newDiv);
flag=1;
};
//pageX;pageY;鼠标距离文档(当前页面的)最上角的距离;不支持IE678;
//clientX;clientY;指的是浏览器;
//onmouseover和onmouseenter区别;over会传播,enter是不传播的;
//onmouseout和onmouselive区别;
// onmouseover和onmouseenter很像,但是可以避免onmouseover的一些问题;
// 如果是从父元素到子元素,不会触发onmouseover;
// 如果是从子元素到父元素,也不会触发onmouseover;
//阻止事件传播/冒泡的方法;
/* this.appendChild(ele);
ele.onmouseover=function(event){
event=event||window.event;
if(event.stopPropagation){
event.stopPropagation();//标准留言器中禁止冒泡;
//stopPropagation是禁止传播的意思;
// preventDefault中文意思是阻止默认行为;
}else{
event.cancelBubble=true;//IE浏览器禁止冒泡;IE678;cancelBubble中文是取消冒泡的意思;
}
}*/
</script>