常用鼠标事件，键盘事件总结

最新推荐文章于 2024-05-15 02:17:13 发布

幸福璐

最新推荐文章于 2024-05-15 02:17:13 发布

阅读量5k

点赞数

分类专栏： web前端文章标签：前端 css javascript html qq

本文链接：https://blog.csdn.net/lululul123/article/details/53574014

版权

web前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

今天学习了学习了QQ登录面板的拖拽，关闭，切换登录状态。完全自己练习写了一遍。通过自己动手练习，对html，css，JavaScript又进一步的巩固与拓展。

制作静面图展示：

由于是初步的学习，发现，css中有很多属性，自己都没有用过：

在这次制作过程中遇到一些重要但是自己没有用过的属性，记录下：

-moz-：firefox浏览器特有属性；

-webkit-:chrome,safari浏览器特有的属性；

border-radius：使用圆角边框。参数按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

一个参数：将用于全部的于四个角。

两个参数：第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。

三个参数：第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

box-shadow:设置阴影。none：是指无阴影；正常5个参数；

使用方法：box-shadow:0 0 8px 8px #000;

第一个参数：第1个长度值用来设置对象的阴影水平偏移值。可以为负值

第二个参数：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值第三个参数：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值第四个参数：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值第五个参数:设置对象的阴影的颜色。 cursor：设置鼠标在某处的样式；例如，cursor：pointer；代表是指针样式。

接触了JavaScript中一些常用的鼠标事件：

onmousedown:用鼠标点击某个元素要触发的动作；

onmousemove：当鼠标指针在元素内部移动时，反复的触发某个动作；

onmouseup：当释放鼠标按键时要触发的动作；

onmouseover：鼠标指针划到某个元素上面要触发的动作；

onmouseout：鼠标指针离开某个元素是要触发的动作；

在制作qq面板时的一些重要知识点：

处理面板跟随鼠标时的知识：

1、当鼠标点击某个事件时，这个事件对象包含clientX和clientY这两个属性。代表了，该事件在窗口中的横纵坐标。

2、offsetXxxx属性：如offsetLeft，指的是获取此时的元素相对于它的父元素的左侧偏移量，即表示事件发生时鼠标指针在窗口中的水平和垂直坐标，不包括页面滚动的距离。

3、A.offsetWidth和A.offsetHeight属性：获取A元素的宽度和高度。

4、注意在适当时候阻止事件冒泡,否则，某页效果会被覆盖。我们无法看到。很重要。

在提及一下事件冒泡的阻止方法：对象.stopPropagation();和ie中方法：对象.cancelBubble=true;

JavaScript代码实现：

// JavaScript Document
//getElementsByClassName();方法不是在任何浏览器中都好使的，我们封装一个方法来处理取得类名的封装方法；
function getClassName(clsName,parent){
	var object=parent?document.getElementById(parent):document;
	els=[];
	elements=object.getElementsByTagName("*");
	for(var i=0;i<elements.length;i++){
		if(elements[i].className==clsName){
			els.push(elements[i]);
		}
	}
	return els;
}
window.οnlοad=drag;
function drag(){
	topp=getClassName('topPicture')[0];
	topp.οnmοusedοwn=move;
	//关闭
	closee=getClassName('CloseButton')[0];
	closee.οnclick=function(){
		panel=getClassName('panel')[0];
		panel.style.display='none';
	}
	//下拉列表框
	LoginStatus=document.getElementById('LoginStatus');
	menu=document.getElementById('menu');
	list=menu.getElementsByTagName('li');
	picture=document.getElementById('picture');
	textt=document.getElementById('status');
	/*点击出现列表*/
	LoginStatus.οnclick=function(e){
		e=e||window.e;
		if(e.stopPropagation){
			e.stopPropagation();
		}else if(e.cancelBubble){
			e.cancelBubble=true;
		}
		menu.style.display='block';
	}
	/*每次划过列表改变颜色，离开后恢复颜色,并且点击之后*/
	for(var i=0;i<list.length;i++){
		list[i].οnmοuseοver=function(){
			this.style.background="#ccc";
		}
		list[i].οnmοuseοut=function(){
			this.style.background="#f6f6f6";
		}
		list[i].οnclick=function(e){
			e=e||window.e;
			e.stopPropagation()||e.cancelBubble==true;
			var id=this.id;
			menu.style.display="none";
			picture.className="";
			picture.className='statusPicture '+id;
			textt.innerHTML=getClassName('selectText',id )[0].innerHTML;
			
		}
	}
	document.οnclick=function(){
		menu.style.display='none';
	}
	
}
function move(event){
	e=event||window.event;
	var panel=getClassName('panel')[0];
	var leftLocation=e.clientX-panel.offsetLeft;
	var topLocation=e.clientY-panel.offsetTop;
	document.οnmοusemοve=function(e){
		ee=e||window.e;
		moveTo(ee,leftLocation,topLocation);	
	}
	document.οnmοuseup=function(){
		document.οnmοusemοve=null;
		document.οnmοuseup=null;
	}
}
function moveTo(ee,leftLocation,topLocation){
		var panel=getClassName('panel')[0];
	    var l=ee.clientX-leftLocation;
		var t=ee.clientY-topLocation;
		var WinW=document.documentElement.clientWidth||document.body.clientWidth;
		var WinH=document.documentElement.clientHeight||document.body.clientHeight;
		var maxW=WinW-panel.offsetWidth;
		var maxH=WinH-panel.offsetHeight;
		if(l<0)
		l=0;
		if(l>maxW)
		l=maxW;
		if(t<0)
		t=0;
		if(t>maxH){
			t=maxH;
		}
		panel.style.left=l+"px";
		panel.style.top=t+"px";
}

qq面板图案设置css：

@charset "utf-8";
/* CSS Document */
.panel{
	width:320px;
	height:200px;
	position:absolute;
	background-color:#f6f6f6;
	top:180px;
	left:521px;
	border:solid 1px #ccc;
	-moz-box-shadow:0 0 8px #000;
	-webkit-box-shadow:0 0 8px #000;
	box-shadow:0 0 8px #000;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
.CloseButton{
	position:absolute;
	right:-10px;
	z-index:1;
	width:28px;
	height:28px;
	background:url(../picture/close.png);
	margin-right:10px;
}
.topPicture{
	margin-left:70px;
	margin-top:10px;
	width:200px;
	height:44px;
	background:url(../picture/login_window_logo.png) no-repeat -210px 0;
	cursor:move;
}
.center{	
	margin-left:50px;
	font: bold 15px arial;
}
.center .text{
	width:150px;
	line-height:18px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	 color: #868686;
     font-size: 16px;
	
}
.center .inputText{
	margin-top:20px;
	margin-bottom:20px;
	
}
.loginButton{
	width:111px;
	height:35px;
	margin-left:64px;
	background:url(../picture/login_btn.png) no-repeat -111px 0px;
	float:left;
}
.statusPicture{
	width:15px;
	height:15px;	
	position:absolute;
	left:180px;
	bottom:12px;
}
.Triangle{
	width:10px;
	height:15px;
	background:url(../picture/ptlogin.png) no-repeat 0px -15px;
	position:absolute;
	left:200px;
	bottom:15px;
}
.statusText{
	position:absolute;
	left:215px;
	bottom:12px;
}
.menu{
	margin-left:10px;
	padding-left:27px;
	background-color:#f6f6f6;
	width:71px;
	height:112px;
	list-style:none;
	position:absolute;
	left:160px;
	bottom:-125px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	cursor:pointer;
}
.selectIcon{
	width:15px;
	height:15px;
	position:absolute;
	left:10px;
	float:left;
}
.Online{
	
	background:url(../picture/ptlogin.png);
	
}
.QME{
	background:url(../picture/ptlogin.png) no-repeat -72px 0;
	
}
.Leave{

	background:url(../picture/ptlogin.png) no-repeat -18px 0;
	
}
.Busy{
	
	background:url(../picture/ptlogin.png) no-repeat -36px 0;
	
}
.nono{
	
	background:url(../picture/ptlogin.png) no-repeat -107px 0;
	
}
.hidden{
	
	background:url(../picture/ptlogin.png) no-repeat -53px 0;
	
}

html代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qq面版</title>
<link href="../css/qq.css" rel="stylesheet" type="text/css" />
<script src="../js/qq.js" type="text/javascript"></script>
</head>

<body>
<div class="panel">

 <div class="CloseButton"></div>

 <div class="topPicture"></div>
 
 <div class="center" >
    <div class="inputText">
    <span>账号:</span>
    <input class="text" value="QQ号码或Email账号" 
     οnmοuseοver="if(value =='QQ号码或Email帐号'){value =''}"
    onBlur="if(value ==''){value='QQ号码或Email帐号';}" tabindex="1"></input></div>
    
    
    <div class="inputText"><span>密码:</span><input class="text" tabindex="2"></input></div>
 </div>
 
 <div class="bottom">
 <div class="loginButton"></div>
 
 <div class="LoginStatus" id="LoginStatus">
 	<div class="statusPicture Online" id="picture"></div>
    <div class="Triangle" id="triangle"></div>
    <div class="statusText" id='status'>在线</div>
    <ul id="menu" class="menu" style="display:none">
    	<li id="Online">
        	<div class="selectIcon Online"></div>
            <div class="selectText">我在线上</div>
        </li>
        <li id="QME">
        	<div class="selectIcon QME"></div>
            <div class="selectText">Q我吧</div>
        </li>
        <li id="Leave">
        	<div class="selectIcon Leave"></div>
            <div class="selectText">离开</div>
        </li>
        <li id="Busy">
        	<div class="selectIcon Busy"></div>
            <div class="selectText">忙碌</div>
        </li>
        <li id="nono">
        	<div class="selectIcon nono"></div>
            <div class="selectText">请勿打扰</div>
        </li>
        <li id="hidden">
        	<div class="selectIcon hidden"></div>
            <div class="selectText">隐身</div>
        </li>
    </ul>
 </div>
 <div>
 </div>
 </div>
</div>
</body>
</html>

对于键盘事件练习了抽奖系统：

onkeydown:当用户按下键盘上任意键触发，而如果按住不放的话，会反复的触发此事件。

onkeypress：当用户按下键盘上的字符键触发，而如果按下不放的话，会反复的触发此事件。

onkeyup：当用户释放键盘上的按键时触发。

注意：

1、如何判断用户按了那个按键？

event对象提供了keyCode属性，当用户按哪个按键，可以获得该对象的对应的键码值，从而进行判断。

当要判断是第几次按这个键子时，可以用一个全局变量自己进行控制。

2、注意使用setIntervel（）；和clearInterval（）；方法。

当点击某个键子，进行指定周期的跳转，为了不返回的触及定制器，每次进入时，先对定时器进行一下清除。