标签：
获取鼠标坐标
<script> window.onload = function(){ document.onclick = function(ev){ var oEvent = event || ev; alert(oEvent.clientX + "," + oEvent.clientY); } }; </script>
事件冒泡
<!DOCTYPE HTML> <html onclick="alert(‘html‘);"> <head> <meta charset="utf-8"> <style> div {padding:100px;} </style> </head> <body onclick="alert(‘body‘);"> <div style="background:#CCC;" onclick="alert(this.style.background);"> <div style="background:green;" onclick="alert(this.style.background);"> <div style="background:red;" onclick="alert(this.style.background);"> </div> </div> </div> </body> </html>
阻止事件冒泡
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> #div1 {width:400px; height:300px; background:#CCC; display:none;} </style> <script> window.onload=function () { var oBtn=document.getElementById(‘btn1‘); var oDiv=document.getElementById(‘div1‘); oBtn.onclick=function (ev) { var oEvent=ev||event; oDiv.style.display=‘block‘; //alert(‘按钮被点击了‘); oEvent.cancelBubble=true; }; document.onclick=function () { oDiv.style.display=‘none‘; //alert(‘document被点击了‘); }; }; </script> </head> <body> <input id="btn1" type="button" value="显示" /> <div id="div1"> </div> </body> </html>
鼠标坐标，让div跟随鼠标移动
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> #div1 {width:200px; height:200px; background:red; position:absolute;} </style> <script> document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById(‘div1‘); oDiv.style.left=oEvent.clientX+‘px‘; oDiv.style.top=oEvent.clientY+‘px‘; }; </script> </head> <body> <div id="div1"></div> </body> </html>
但是如果这时候页面有滚动条的话，移动滚动条后div就不会跟随鼠标了，于是我们加上scrollTop
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> #div1 {width:200px; height:200px; background:red; position:absolute;} </style> <script> document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById(‘div1‘); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.left=oEvent.clientX+‘px‘; oDiv.style.top=oEvent.clientY+scrollTop+‘px‘; }; </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>
每次我们用到clientX和clientY的时候我们都要记得给它们加上scrollLeft和scrollTop，既然如此我们干脆将这个方法抽象出来。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> #div1 {width:200px; height:200px; background:red; position:absolute;} </style> <script> function getPos(ev) { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; } document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById(‘div1‘); var pos=getPos(oEvent); oDiv.style.left=pos.x+‘px‘; oDiv.style.top=pos.y+‘px‘; }; </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>
一串跟随鼠标的div
原理：后一个div跟着前一个div走，第一个div跟着鼠标走
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> div {width:10px; height:10px; background:red; position:absolute;} </style> <script> function getPos(ev) { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; } document.onmousemove=function (ev) { var aDiv=document.getElementsByTagName(‘div‘); var oEvent=ev||event; var pos=getPos(oEvent); for(var i=aDiv.length-1;i>0;i--) { aDiv[i].style.left=aDiv[i-1].offsetLeft+‘px‘; aDiv[i].style.top=aDiv[i-1].offsetTop+‘px‘; } aDiv[0].style.left=pos.x+‘px‘; aDiv[0].style.top=pos.y+‘px‘; }; </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
键盘事件
keyCode
<script> document.onkeydown=function (ev) { var oEvent=ev||event; alert(oEvent.keyCode); }; </script>
键盘控制div左右移动
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> #div1 {width:100px; height:100px; background:#CCC; position:absolute;} </style> <script> document.onkeydown=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById(‘div1‘); if(oEvent.keyCode==37) { oDiv.style.left=oDiv.offsetLeft-10+‘px‘; } else if(oEvent.keyCode==39) { oDiv.style.left=oDiv.offsetLeft+10+‘px‘; } }; </script> </head> <body> <div id="div1"></div> </body> </html>
提交留言
基本布局
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body> <input id="txt1" type="text" /><br> <textarea id="txt2" rows="10" cols="40"></textarea> </body> </html>
按回车提交
<script> window.onload=function () { var oTxt1=document.getElementById(‘txt1‘); var oTxt2=document.getElementById(‘txt2‘); oTxt1.onkeydown=function (ev) { var oEvent=ev||event; if(oEvent.keyCode==13) { oTxt2.value+=oTxt1.value+‘\n‘; oTxt1.value=‘‘; } }; }; </script>
按ctrl+回车提交
<script> window.onload=function () { var oTxt1=document.getElementById(‘txt1‘); var oTxt2=document.getElementById(‘txt2‘); oTxt1.onkeydown=function (ev) { var oEvent=ev||event; if(oEvent.keyCode==13 && oEvent.ctrlKey) { oTxt2.value+=oTxt1.value+‘\n‘; oTxt1.value=‘‘; } }; }; </script>
标签：
原文地址：http://www.cnblogs.com/zcynine/p/5087425.html
