event对象

用来获取事物的详细信息:鼠标位置,键盘按键
获取event对象(兼容性写法)OEvent=e||event

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=e||event;
alert(‘X’+ove.clientX+’,’+’Y’+ove.clientY);//为IE,火狐做兼容
}

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

默认行为

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

<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=e||event;
		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=e||event;
	var xxx=opp.clientX-tz.offsetLeft;
	var yyy=opp.clientY-tz.offsetTop;
	// alert(xxx+'...'+yyy);
	document.onmousemove=function(e){
	var opp=e||event;
	var left=opp.clientX-xxx;
	var top=opp.clientY-yyy;
		if(left< 0){
				left=0;
					}
		if(top< 0){
					top=0;
					}
	var maxw=document.body.clientWidth||document.documentElement.clientWidth-tz.offsetWidth;//求最大宽,若有兼容性问题,在body也documentElement之间切换,或者||格式
	var maxh=document.body.clientHeight||document.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
				}

实例点击查看

        👍赞 0
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...