6.29心得
鼠标的相对、绝对位置
需要引入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;
}
什么是事件
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某
按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
onload 和 onUnload
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。
onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
onSubmit
onSubmit 用于在提交表单之前验证所有的表单域。
下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：
<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30">
</a>
onmouseover与onmouseenter的区别
onmouseover和onmouseout鼠标移入移出时触发的事件：
onmouseover 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
onmouseout 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
onmouseover和onmouseout 这两个事件在javascript中较常用。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标移入时，改变字体的背景色，移出时，还原默认的背景色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
function aixuexi(){
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="yellowgreen";
}
function xuexi(){
var xuexi=document.getElementById("woaixuexi");
xuexi.style.background="#abcdef";
}
</script>
</head>
<body>
<div id="woaixuexi" onmouseover="aixuexi();" onmouseout="xuexi();" class="xuexi"></div>
</body>
</html>
onmouseout与onmouseleave的区别
1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
代码
function hideMsgBox(theEvent){ //theEvent用来传入事件，Firefox的方式
if (theEvent){
var browser=navigator.userAgent; //取得浏览器属性
if (browser.indexOf("Firefox")>0){ //如果是Firefox
if (document.getElementById('MsgBox').contains(theEvent.relatedTarget)) { //如果是子元素
return; //结束函式
}
}
if (browser.indexOf("MSIE")>0){ //如果是IE
if (document.getElementById('MsgBox').contains(event.toElement)) { //如果是子元素
return; //结束函式
}
}
}
/*要执行的操作*/
}
判断鼠标的移动方向
代码
function(wrap){
var wrap = document.getElementById(wrap);
var hoverDir = function(e){
var w = wrap.offsetWidth,
h = wrap.offsetHeight,
x = ( e.clientX - wrap.offsetLeft - ( w / 2 ) ) * ( w > h ? ( h / w ) : 1 ),
y = (e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1),
// 上(0) 右(1) 下(2) 左(3)
direction = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3 ) % 4,
eventType = e.type,
dirName = new Array('上方','右侧','下方','左侧');
if( e.type == 'mouseover' || e.type == 'mouseenter' ){
wrap.innerHTML = dirName[direction] + '进入';
}else{
wrap.innerHTML = dirName[direction] + '离开';
}
}
if( window.addEventListener ){
wrap.addEventListener( 'mouseover',hoverDir,false );
wrap.addEventListener( 'mouseout',hoverDir,false );
}else if( window.attachEvent ){
wrap.attachEvent( 'onmouseenter',hoverDir );
wrap.attachEvent( 'onmouseleave',hoverDir );
}
}
