event事件和事件冒泡+鼠标移动
event事件和事件冒泡
document.onclick=function(ev){ /*if (ev) { alert(ev.clientX+','+ev.clientY) } else { alert(event.clientX+','+event.clientY) };*/ var oEvent=ev||event alert(oEvent.clientX+','+oEvent.clientY) }
取消事件冒泡
<script type="text/javascript"> window.onload=function() { var oBtn= document.getElementById('btn1'); var oDive= document.getElementById('div1'); oBtn.onclick=function(ev){ var oEvent=ev||event oDive.style.display="block"; oEvent.cancelBubble=true; } document.onclick=function(){ oDive.style.display="none" } } </script> <input type="button" id="btn1"> <div id="div1" style="width:100px;height:150px;background:#ccc;display:none;"></div>
跟随鼠标移动
<style type="text/css"> #div1{ position: absolute; width:100px;height:100px;background:red;} </style> <script type="text/javascript"> document.onmousemove=function(ev){ var oEvent=ev||event; var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oDiv.style.left=oEvent.clientX+scrollLeft+'px'; oDiv.style.top=oEvent.clientY+scrollTop+'px'; } </script> <div id="div1"></div>
一串移动
<style> div {width:10px; height:10px; background:red; position:absolute;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); var i=0; document.onmousemove=function(ev){ var oEvent=ev||event; for(i=oDiv.length-1;i>0;i--) { oDiv[i].style.left=oDiv[i-1].style.left; oDiv[i].style.top=oDiv[i-1].style.top; } oDiv[0].style.left=oEvent.clientX+'px'; oDiv[0].style.top=oEvent.clientY+'px'; } } </script> <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>
新功能