微信扫一扫打赏支持

js鼠标事情

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>

 

posted @ 2017-12-24 00:19  范仁义  阅读(172)  评论(0)  编辑  收藏  举报