javaScript_DOM事件类型

最新推荐文章于 2024-03-28 18:59:29 发布

_SmallHJ

最新推荐文章于 2024-03-28 18:59:29 发布

阅读量413

点赞数

分类专栏： Web前端文章标签： javaScript DOM事件类型鼠标事件面板拖拽拖拽

本文链接：https://blog.csdn.net/hujiaoay/article/details/44871945

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOM事件有很多不同类型，例如，有鼠标事件，有键盘事件。接下来通过一个实例来讲解几个常见的鼠标事件：

登录面板拖拽：

首先，创建一个简单地页面，如下：

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>登录面板拖拽</title>
	<script type="text/javascript" src="js/drag.js"></script>
	<style type="text/css">
	#drag_div{
		position:absolute;
		background-color: #eeeeee;
		left:500px;
		top: 200px;
		width: 350px;
		height: 200px;
		border:1px solid #eeeeee;
		border-radius: 1em;
	}
	.head{
		border-bottom: 1px solid #fff;
		padding-left: 140px;
		padding-top: 10px;
		padding-bottom: 0px;
		cursor:move;  
	}
	.hTitle{
		font-size: 24px;
	}
	.close{
		position:relative;
	}
	.hClose{
		position:absolute;
		right: -23px;
		top: -60px;
		width: 46px;
		height: 46px;
		background:url(close.png);
		text-decoration: none;
		color:#000;
		line-height:20px;
	}
	.body{
		border-bottom:1px solid #fff;
	}
	form{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	label{
		display: inline-block;
		text-align: right;
		width: 100px;
		margin-top: 10px;
	}
	.tInput{
		margin-top: 10px;
		border:1px solid #fff;
		border-radius: 1em;
		width: 180px;
		padding:5px 5px 5px 5px;
	}
	.tInput:focus{
		border-color: rgba(82,168,236,0.8);
		box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);
		outline: 0 none;
	}
	</style>
</head>
	<body>
		<div id="drag_div">
			<div class="head">
				<div class="hTitle">登录</div>
				<div class="close"><a href="#" class="hClose"></a></div>
			</div>	
			<div class="body">
				<form>
					<label>用户名：</label>
					<input type="text" placeholder="输入用户名" class="tInput" />
					<br/>
					<label>密码：</label>
					<input type="passward" placeholder="输入密码" class="tInput"/>
				</form>
			</div>		
		</div>
	</body>
</html>

要实现当鼠标点击“登录”所在区域时，登录面板可以随着鼠标的移动在页面中移动，当鼠标按钮释放时，面板就不随鼠标移动了。创建一个drag.js文件。首先，了解一个细节，在许多大型的网站中，许多元素通过class获取较为方便，然而getElementsByClassName()方法，在IE10之前是不支持的，所以通过封装一个函数，来实现跨浏览器通过className获取元素，代码如下：

function getElesByClass(classN,parent){
	var oParent = parent?document.getElementById(parent):document;
	var eles = [];
	var allEles = oParent.getElementsByTagName("*");
	for(var i = 0;i < allEles.length;i++){
		if(allEles[i].className == classN){
			eles.push(allEles[i]);
		}
	}  
	return eles;
}

下面先简单介绍三个事件：

onmousedown：在用户按下任何鼠标按钮时触发；
onmousemove：当鼠标指针在元素内部移动时重复的触发；
onmouseup：当用户释放鼠标按钮时触发。

实现整个功能的js代码如下：

window.onload = function(){
	var hTitle = getElesByClass("hTitle")[0];
	<span style="color:#ff0000;">hTitle.onmousedown</span> = fnDown;  //按下任何鼠标按钮时触发
	//点击关闭按钮
	var oClose = getElesByClass("hClose")[0];
	var oDrag = document.getElementById("drag_div");
	oClose.onclick = function(){
		oDrag.style.display = "none";
	}
}

function fnDown(event){  //通过鼠标按下的event对象的clientX属性和clientY属性获取鼠标光标的位置坐标
	event = event || window.event;  //解决浏览器兼容问题
	var oDrag = document.getElementById("drag_div");
	//获取鼠标按钮按下时，鼠标光标与面板左边界及上边界的距离（用光标的位置坐标减去面板与浏览器的左距离及上距离）
	var disX = event.clientX - oDrag.offsetLeft;
	var disY = event.clientY - oDrag.offsetTop;
	//当鼠标在页面中移动时
	<span style="color:#ff0000;">document.onmousemove</span> = function(event){  //鼠标移动的event对象
		event = event || window.event;
		//计算当鼠标移动时，面板的位置
		var l = event.clientX - disX;
		var t = event.clientY - disY;
		//计算当前页面的宽度及高度
		var winW = document.documentElement.clientWidth || document.body.clientWidth;
		var winH = document.documentElement.clientHeight || document.body.clientHeight;
		//通过控制面板移动的范围，是的面板不会移动到浏览器页面之外
		var maxW = winW - oDrag.offsetWidth-23;
		var maxH = winH - oDrag.offsetHeight;
		if(l < 0){
			l = 0;
		}else if(l > maxW){
			l = maxW;
		}
		if(t < 20){
			t = 20;
		}else if(t > maxH){
			t = maxH;
		}

		oDrag.style.left = l + "px";
		oDrag.style.top = t + "px";		
	}

	//释放鼠标
	<span style="color:#ff0000;">document.onmouseup</span> = function(){
		document.onmousemove = null;  //DOM0级注销事件处理程序
		document.onmouseup = null;
	}
}

注意：

1.将面板拖拽的步骤为以下三步：

在标题区域按下鼠标按钮，在这个过程中触发标题区域元素的onmousedown事件；
将鼠标在页面中移动，而面板跟随鼠标移动，在这个过程中触发页面document的onmousemove事件；
释放鼠标按钮，面板停止跟随鼠标移动，在这个过程中触发页面document的onmouseup事件。

在第二步中，需要知道，任何能够跟随鼠标移动的元素，其前提是这个元素必须有个绝对定位：position:absolute。

2.在鼠标移动过程中，通过事件对象的clientX属性及clientY属性得到鼠标光标的位置坐标，从而计算并改变面板的位置坐标，实现面板跟随鼠标移动的效果。

扩展内容：鼠标事件都是在浏览器窗口中的特定位置上发生的。而这个位置的信息保存在事件的clientX属性和clientY属性中。并且所有的浏览器都支持这两个属性。它们的值表示事件发生时鼠标指针在视口中的水平和垂直距离。不包括页面的滚动距离。

3.为了能够使得面板在移动过程中，不会超出浏览器视口范围，则可以控制面板的移动范围，来解决这一问题。而有个细节需要注意，由于表示关闭的那个元素战友一定的空间，所以在控制面板的移动范围时，要将这个元素的空间也考虑进去。

4.最后需要释放鼠标按钮，这时可以直接通过之前讲过的DOM0级事件处理程序的方法，将鼠标移动事件以释放鼠标按钮事件注销。

_SmallHJ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript_DOM事件类型

DOM事件有很多不同类型，例如，有鼠标事件，有键盘事件。接下来通过一个实例来讲解几个常见的鼠标事件：登录面板拖拽：首先，创建一个简单地页面，如下：HTML代码如下：登录面板拖拽 #drag_div{ position:absolute; background-color: #eeeeee; left:500px; top: 200px;
复制链接

扫一扫