js鼠标事情
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>7-70 课堂演示</title> 6 <style type="text/css"> 7 div{ 8 background: green; 9 padding: 20px; 10 width: 150px; 11 height: 150px; 12 left: 15px; 13 position: relative; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="div1"></div> 19 <hr> 20 <input type="button" id="btn1" value="myFun1" ondblclick="myFun1()"> 21 <input type="button" id="btn2" value="myFun2" > 22 <script> 23 var div1=document.getElementById('div1'); 24 var btn1=document.getElementById('btn1'); 25 var btn2=document.getElementById('btn2'); 26 27 function myFun1(){ 28 div1.innerHTML='<h2>鼠标双击事件</h2>' 29 div1.style.border='2px solid orange' 30 } 31 function myFun2(){ 32 div1.innerHTML = "你在 div 中点击了鼠标右键!"; 33 div1.style.color = "orange"; 34 } 35 function myFun3() { 36 div1.innerHTML=('<h3>鼠标按下') 37 div1.style.color='red' 38 } 39 40 function myFun4() { 41 div1.innerHTML=('<h3>鼠标松开') 42 div1.style.color='red' 43 } 44 function myFun5() { 45 div1.innerHTML=('<h3>鼠标移入') 46 div1.style.color='red' 47 } 48 function myFun6() { 49 div1.innerHTML=('<h3>鼠标移开') 50 div1.style.color='red' 51 } 52 53 //鼠标按下 54 div1.onmousedown=myFun3 55 //鼠标松开 56 div1.onmouseup=myFun4 57 //鼠标移入 58 div1.addEventListener('mouseover',myFun5) 59 //鼠标移开 60 div1.addEventListener('mouseout',myFun6) 61 //鼠标右键单击事件 62 div1.addEventListener('contextmenu', 63 function (){ 64 div1.innerHTML = "你在 div 中点击了鼠标右键!"; 65 div1.style.color = "orange"; 66 }) 67 </script> 68 </body> 69 </html>