JS事件三

event对象

用来获取事物的详细信息：鼠标位置，键盘按键
获取event对象（兼容性写法）OEvent=eevent

event实例：
鼠标点击页面任何地方显示XY坐标
document.onclick=function(e){
alert(‘X’+event.clientX+’,’+’Y’+event.clientY);//支持谷歌，IE，不支持火狐
alert(‘X’+e.clientX+’,’+’Y’+e.clientY);//传参e支持火狐，谷歌，不支持IE
var ove=eevent;
alert(‘X’+ove.clientX+’,’+’Y’+ove.clientY);//为IE，火狐做兼容
}

document.onclick=function(e){
alert('X'+event.clientX+','+'Y'+event.clientY);
var ove=eevent;
}

默认行为

阻止默认行为与自定义右键菜单实例：

<ul id="cai">
<li>自定义菜单</li>
<li>自定义菜单</li>
<li>自定义菜单</li>
<li>自定义菜单</li>
<li>自定义菜单</li>
</ul>

#cai{
width:100px;
height:200px;
background-color: #ccc;
line-height: 15px;
border:1px solid red;
list-style: none;
display: none;
position: absolute;
}

// 阻止右键行为
document.oncontextmenu=function(){
return false;
}
// 弹出自定义右键菜单
document.oncontextmenu=function(e){
var odd=eevent;
var dan=document.getElementById('cai');
dan.style.display='block';
dan.style.left=odd.clientX+'px';
dan.style.top=odd.clientY+'px';
return false;
}
document.onclick=function(){
dan.style.display='none';
}

鼠标事件对象

clientX：鼠标指针的水平坐标
clientY：鼠标指针的垂直坐标
语法：event.clientX / clientY

DOM属性

offsetWidth：返回元素的宽度，包括边框和填充，但不是边距
offsetHeight：返回元素的高度，包括边框和填充，但不是边距
offsetLeft：返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop：返回当前元素上边界到它上级元素的上边界的距离，只读属性
clientWidth：在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
clientHeight：在页面上返回内容的可视高度（不包括边框，边距或滚动条）

鼠标拖拽实例：

<div id="tz"></div>

#tz{
width:100px;
height:100px;
background-color: red;
position: absolute;
cursor: move;
}

var tz=document.getElementById('tz');
tz.onmousedown=function(e){
var opp=eevent;
var xxx=opp.clientX-tz.offsetLeft;
var yyy=opp.clientY-tz.offsetTop;
// alert(xxx+'...'+yyy);
document.onmousemove=function(e){
var opp=eevent;
var left=opp.clientX-xxx;
var top=opp.clientY-yyy;
if(left< 0){
left=0;
}
if(top< 0){
top=0;
}
var maxw=document.body.clientWidthdocument.documentElement.clientWidth-tz.offsetWidth;//求最大宽,若有兼容性问题，在body也documentElement之间切换，或者格式
var maxh=document.body.clientHeightdocument.documentElement.clientHeight-tz.offsetHeight;//求最大高,若有兼容性问题，在body也documentElement之间切换，或者格式
if(left>maxw){
left=maxw;
}
if(top>maxh){
top=maxh;
}
tz.style.left=left+'px';
tz.style.top=top+'px';
}
}
            tz.onmouseup=function(){
// tz.onmousemove=null;//快速移动，鼠标会脱落
document.onmousemove=null;//快速移动，鼠标不会脱落,上边的onmousemove前边的tz，要换成document
}

实例点击查看