您的位置：首页 > Web前端 > JavaScript

鼠标位置Javascript事件详解1

2013-05-19 19:39 411 查看
在改章节中,我们主要介绍鼠标位置的内容,自我感觉有个不错的建议和大家分享下

    这一篇文章原来准备上个周日发布的，拖了好长时间，LOL玩多了。来日要开始做网站了，更新的可能会更慢，希望这个学期之前把基础教程学完，还有18课时，大概须要一个月搞定。加油！！！

    关于document---document是位于html标签之上的，可以说是权利最大的。上面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。

1 <script>
2     document.onclick=function(){
3         alert('a');
4     };
5 </script>


 
    获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置

1 <script>
2     document.onclick=function(ev){
3         if(ev)
4         {
5             alert(ev.clientX+','+ev.clientY);
6         }
7         else{
8             alert(event.clientX+','+event.clentY);
9         };
10     };
11 </script>


或者

1 <script>
2     document.onclick=function(ev){
3     /*    if(ev)
4         {
5             alert(ev.clientX+','+ev.clientY);
6         }
7         else{
8             alert(event.clientX+','+event.clentY);
9         };
10     };*/
11     var oEvent=ev||event;
12     alert(oEvent.clientX+','+oEvent.clientY);
13     };
14 </script>


事件冒泡---一层一层叠加的元素在一起，构成事件冒泡，比如上面的例子：document的最大范围影响了div的响应。

1 <script>
2     window.onload=function(){
3         var obtn=document.getElementById('btn1');
4         var odiv=document.getElementById('div1');
5         obtn.onclick=function(ev){
6             var oEvent=ev||event;
7             odiv.style.display='block';
8             oEvent.cancelBubble=true;//清除冒泡
9         };
10         document.onclick=function(){
11             odiv.style.display='none';
12         };
13     };
14 </script>
15 </head>
16
17 <body>
18 <input type="button" value="表现" id="btn1"/>
19 <div id="div1" style="width:100px;height:150px;background:#ccc;"></div>
20 </body>


鼠标挪动---在可视区有效

1 <title>鼠标挪动</title>
2 <script>
3     window.onmousemove=function(ev){
4         var oEvent=ev||event;
5         var odiv=document.getElementById('div1');
6         odiv.style.left=oEvent.clientX+'px';
7         odiv.style.top=oEvent.clientY+'px';
8     };
9 </script>
10 </head>
11
12 <body>
13 <div id="div1" style="width:50px;height:50px;background:blue;position:absolute;"></div>
14 </body>


 键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操纵。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <style>
5 #div1 {width:100px; height:100px; background:#CCC; position:absolute;}
6 </style>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title>无标题文档</title>
9 <script>
10 document.onkeydown=function (ev)
11 {
12     var oEvent=ev||event;
13     var oDiv=document.getElementById('div1');
14
15     //←        37
16     //右        39
17
18     if(oEvent.keyCode==37)
19     {
20         oDiv.style.left=oDiv.offsetLeft-10+'px';
21     }
22     else if(oEvent.keyCode==39)
23     {
24         oDiv.style.left=oDiv.offsetLeft+10+'px';
25     }
26 };
27 </script>
28 </head>
29
30 <body>
31 <div id="div1"></div>
32 </body>
33 </html>


    每日一道理

我把卷子摊在课桌上，恨不得敲一阵锣，叫大家都来看看我这光彩的分数。

 
    鼠标跟随小尾巴

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <style>
5 div {width:10px; height:10px; background:red; position:absolute;}
6 </style>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title>无标题文档</title>
9 <script>
10 window.onload=function ()
11 {
12     var aDiv=document.getElementsByTagName('div');
13     var i=0;
14
15     document.onmousemove=function (ev)
16     {
17         var oEvent=ev||event;
18
19         for(i=aDiv.length-1;i>0;i--)
20         {
21             aDiv[i].style.left=aDiv[i-1].style.left;
22             aDiv[i].style.top=aDiv[i-1].style.top;
23         }
24
25         aDiv[0].style.left=oEvent.clientX+'px';
26         aDiv[0].style.top=oEvent.clientY+'px';
27     };
28 };
29 </script>
30 </head>
31
32 <body>
33 <div></div>
34 <div></div>
35 <div></div>
36 <div></div>
37 <div></div>
38 <div></div>
39 <div></div>
40 <div></div>
41 <div></div>
42 <div></div>
43 <div></div>
44 <div></div>
45 <div></div>
46 <div></div>
47 <div></div>
48 <div></div>
49 <div></div>
50 <div></div>
51 <div></div>
52 <div></div>
53 <div></div>
54 <div></div>
55 <div></div>
56 <div></div>
57 <div></div>
58 <div></div>
59 <div></div>
60 <div></div>
61 <div></div>
62 <div></div>
63 <div></div>
64 <div></div>
65 <div></div>
66 <div></div>
67 <div></div>
68 <div></div>
69 <div></div>
70 <div></div>
71 <div></div>
72 <div></div>
73 </body>
74 </html>


keycode

1 <script>
2 document.onkeydown=function (ev)
3 {
4     var oEvent=ev||event;
5
6     alert(oEvent.keyCode);
7 };
8 </script>


 
 ctrlKey---可以通过ctrl+enter组合键来提交内容

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script>
7 window.onload=function ()
8 {
9     var oBtn=document.getElementById('btn1');
10     var oTxt1=document.getElementById('txt1');
11     var oTxt2=document.getElementById('txt2');
12
13     oBtn.onclick=function ()
14     {
15         oTxt1.value+=oTxt2.value+'\n';
16         oTxt2.value='';
17     };
18
19     oTxt2.onkeydown=function (ev)
20     {
21         var oEvent=ev||event;
22
23         if(oEvent.ctrlKey && oEvent.keyCode==13)
24         {
25             oTxt1.value+=oTxt2.value+'\n';
26             oTxt2.value='';
27         }
28     };
29 };
30 </script>
31 </head>
32
33 <body>
34 <textarea id="txt1" rows="10" cols="40"></textarea><br />
35 <input id="txt2" type="text" />
36 <input id="btn1" type="button" value="留言" />
37 </body>
38 </html>


 
    shiftKey---altKey---类似于ctrlkey

 

    关于scrollTop和clientY

    


文章结束给大家分享下程序员的一些笑话语录： 古鸽是一种搜索隐禽，在中国快绝迹了…初步的研究表明，古鸽的离去，很可能导致另一种长着熊爪，酷似古鸽，却又习性不同的猛禽类——犤毒鸟
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航