javascript:event对象
event.cancelBubble可以阻止事件冒泡
1 <html> 2 <head> 3 <style type='text/css'> 4 div{ 5 border:dashed 1px green; 6 width:200px; 7 height:100px; 8 } 9 </style> 10 </head> 11 <body id='mybody'> 12 <div id='divone'> 13 <button id='clickme'>clickme</button> 14 </div> 15 <script language='javascript'> 16 obj('mybody').onclick=fun; 17 obj('clickme').onclick=fun; 18 obj('divone').onclick=fun; 19 20 function obj(str){ 21 if(typeof str=='string'){ 22 return document.getElementById(str); 23 } 24 } 25 function fun(){ 26 //alert(event.srcElement.id);//window.event event.target事件源 27 alert(this.id);//响应的对象 28 if(this.id=='clickme'){ 29 //event.cancelBubble=true; 30 } 31 } 32 </script> 33 </body> 34 </html>
offsetX指发生事件的对象的左上角(0,0)到鼠标按下的点或者移动到的点，两者之间的距离
而clientX指的是浏览区域即显示网页的区域的左上角与发生鼠标事件的点间的距离。
1 <html> 2 <head> 3 <title>1</title> 4 <style type='text/css'> 5 #divone{ 6 border:dashed 1px green; 7 width:200px; 8 height:100px; 9 } 10 </style> 11 </head> 12 <body> 13 <div id='divone' onclick="fun();"></div> 14 <script language='javascript'> 15 function fun(){ 16 with(event){ 17 alert(offsetX+'/'+offsetY+'\n'+clientX+'/'+clientY); 18 } 19 20 } 21 22 </script> 23 24 </body> 25 </html>
