6.30随笔
一、鼠标的绝对位置和相对位置
注：需要引入JQ

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.0.0.js"></script>
<script type="text/javascript">
function click1 (event){
var data1 = mouseCoords(event);
var x1 = data1.x;
var y1 = data1.y;
alert("绝对坐标："+x1+","+y1);
var data2 = getXAndY(event);
var x2 = data2.x;
var y2 = data2.y;
alert("相对坐标："+x2+","+y2);
}
//获取鼠标点击区域中的相对位置坐标
function getXAndY(event){
//鼠标点击的绝对位置
Ev= event || window.event;
var mousePos = mouseCoords(event);
var x = mousePos.x;
var y = mousePos.y;
//alert("鼠标点击的绝对位置坐标："+x+","+y);
//获取div在body中的绝对位置
var x1 = $("#test").offset().left;
var y1 = $("#test").offset().top;
//alert("div在body中的绝对位置坐标："+x1+","+y1);
//鼠标点击位置相对于div的坐标
var x2 = x - x1;
var y2 = y - y1;
return {x:x2,y:y2};
}
//获取鼠标点击区域在Html绝对位置坐标
function mouseCoords(event){
if(event.pageX || event.pageY){
return {x:event.pageX, y:event.pageY};
}
return{
x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
y:event.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>
</head>
<body>
<div id="test" style="width:200px; height:200px; border:1px solid #d3d3d3;" onclick="click1(event)"></div>
</body>
</html>

二、鼠标的横、纵坐标

var x , y;
//当需求为获得的坐标值相对于body时，用：
function positionBody(event){
event = event||window.event;
//获得相对于body定位的横标值；
x=event.clientX
//获得相对于body定位的纵标值；
y=event.clientY
}
//当需求为获得的坐标值相对于某一对象时，用：
function positionObj(event,id){
//获得对象相对于页面的横坐标值；id为对象的id
var thisX = document.getElementById(id).offsetLeft;
//获得对象相对于页面的横坐标值；
var thisY = document.getElementById(id).offsetTop;
//获得页面滚动的距离；
//注：document.documentElement.scrollTop为支持非谷歌内核；document.body.scrollTop为谷歌内核
var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;
event = event||window.event;
//获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值；
x = event.clientX - thisX;
//获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度；
y = event.clientY - thisY + thisScrollTop;
}

三、什么是事件
什么叫做事件？
事件，俗话说就是对一定事物产生一定的影响。
例如：我们打开一个网页，网页被打开的那一刻，首先触发的事件就是load事件，只有触发了这个事件，才会执行这部分代码。
事件的种类
1、一般事件
2、页面相关事件

3、表单相关事件

4、滚动字幕事件

5、编辑事件

6、数据绑定事件

7、外部事件

四、onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title></title>
<style type='text/css'>
*{ margin:0; padding:0;}
#box3{
height:100px;
background:red;
}
#box2{
padding:50px;
background:blue;
}
#box1{
padding:50px;
background:green;
}
</style>
</head>
<body>
<div id="box1">1
<div id="box2">2
<div id="box3">3</div>
</div>
</div>
<script type="text/javascript">
/*
onmouseover
onmouseout
onmouseenter
onmouseleave
*/
var oBox1 = document.getElementById('box1');
///*
/*
oBox1.onmouseover = function(){ //可以直接通过ID这样调用，但不提倡
console.log( 'over' );
};
*/
oBox1.onmouseout = function(){ //可以直接通过ID这样调用，但不提倡
console.log( 'out' );
};
//*/
/*
oBox1.onmouseenter = function(){ //可以直接通过ID这样调用，但不提倡
console.log( 'enter' );
};
oBox1.onmouseleave = function(){
console.log( 'leave' );
};
*/
</script>
</body>
</html>

五、判断鼠标的移动方向

<script>
var lastX = null,
lastY = null;
window.onmousemove = function(event){
var curX = event.clientX,
curY = event.clientY,
direction = '';
// console.info(event);
// console.info(event.clientX);
// console.info(event.clientY);
// 初始化坐标
if(lastX == null || lastY == null){
lastX = curX;
lastY = curY;
return ;
}
if(curX > lastX){
direction += 'X右,';
}else if(curX < lastX){
direction += 'X左,';
}else{
direction += 'X居中,';
}
if(curY > lastY){
direction += 'Y上';
}else if(curY < lastY){
direction += 'Y下';
}else{
direction += 'Y居中';
}
lastX = curX;
lastY = curY;
console.info(direction);
document.body.innerText = direction;
}
</script>

