每日分享
一、鼠标的绝对位置和相对位置
注：需要引入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>
