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

今天学习了学习了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（）；方法。

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

常用鼠标事件，键盘事件总结相关推荐

HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
【Qt】QT鼠标和键盘事件
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 鼠标事件 04. 键盘事件 05. 附录 01. 概述事件是对各种应用程序需要知道的由应用程序内部或者外部产生的事情或者 ...
html5鼠标事件监听,HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例
演示html5 canvas鼠标事件,获取canvas对象上的鼠标坐标,演示键盘事件通过键盘控制canvas上对象移动. canvas对象支持所有的javascript的鼠标事件,包括鼠标点击(mou ...
python监听鼠标事件_Python中使用PyHook监听鼠标和键盘事件实例
Python 中使用 PyHook 监听鼠标和键盘事件实例 PyHook 是一个基于 Python 的"钩子"库,主要用于监听当前电脑上鼠标和键盘的事件.这个库依赖于另一个 Py ...
tkinter中鼠标与键盘事件
tkinter中鼠标与键盘事件(十五) 本文转自Tynam Yang的博客园 import tkinterwuya = tkinter.Tk() wuya.title("wuya" ...
Android 使用 sendevent 模拟鼠标和键盘事件
Android 使用 sendevent 模拟鼠标和键盘事件模拟原理是对驱动发送消息,就是linux里面的input子系统. 命令格式: sendevent /dev/input/eventX [t ...
前端讲义64_AngularJS鼠标与键盘事件有关指令
ngMousedown 触发条件:鼠标按下,左右中间按下都会触发 ngMouseup 触发条件:鼠标按下弹起,左右中间按下弹起都会触发 ngMouseenter 触发条件:鼠标进入 ngMousele ...
简单的鼠标和键盘事件+阻止默认阻止冒泡+dom0，dom2
什么是事件在我们学习DOM之后,事件就是我们必不可少的一块知识点了,事件其实就是我们的一些操作需要在用户来完成之后才执行的.比如我们PC端的点击事件,键盘事件,以及我们移动端的的触屏事件.接下来咱们 ...
PyQt5 笔记8 -- 鼠标、键盘事件
PyQt5 笔记8 – 鼠标.键盘事件参考博客(鼠标事件) 参考博客(键盘事件) 1.鼠标事件事件: mousePressEvent (self, event):鼠标键按下事件 mouseRele ...

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

常用鼠标事件，键盘事件总结相关推荐

最新文章

热门文章