第53天：鼠標事件、event事件對象
阿新 • • 發佈：2017-10-14
鼠標右鍵 pin mov offsetx 參數 cursor wid 坐標 logs
-->鼠標事件
-->event事件對象
-->默認事件
-->鍵盤事件（keyCode）
-->拖拽效果
一、鼠標事件
onclick ---------------鼠標點擊事件
oncontextmenu------鼠標右鍵點擊
onmouseover --------鼠標移上
onmouseout ---------鼠標移出
onmousedown -------鼠標按下
onmousemove -------鼠標移動
onmouseup ----------鼠標擡起
1 <head> 2 <meta charset="UTF-8"> 3 <title>鼠標事件</title> 4 <style> 5 *{margin:0;padding:0;list-style: none;} 6 #con{ 7 width:300px; 8 height:300px; 9 background: #ccc; 10 border:1px solid #666; 11 margin:10px auto; 12 } 13 #con #box{ 14 width:200px; 15 height:200px; 16 margin:50px auto; 17 background: pink; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="con"> 23 <div id="box"></div> 24 </div> 25 </body> 26 <script> 27 var con=document.getElementById(‘con‘); 28 var x=0,y=0,z=0,a=0,b=0,c=0; 29 //onclick ---------鼠標點擊事件 30 document.onclick=function(){ 31 x++; 32 console.log(‘鼠標點擊_onclick‘+x); 33 } 34 //oncontextmenu----鼠標右鍵點擊 35 document.oncontextmenu=function(){ 36 alert(‘鼠標右擊事件‘);//先彈出彈框後顯示菜單 37 } 38 //onmouseover -----鼠標移上(包括子元素) 39 con.onmouseover=function(){ 40 y++; 41 console.log(‘鼠標移上_onmouseover‘+y); 42 } 43 //onmouseout ------鼠標移出（包括子元素） 44 con.onmouseout=function(){ 45 z++; 46 console.log(‘鼠標移出_onmouseout‘+z); 47 } 48 //onmouseenter -----鼠標移上 49 con.onmouseenter=function(){ 50 y++; 51 console.log(‘鼠標移上_onmouseenter‘+y); 52 } 53 //onmouseleave------鼠標移出 54 con.onmouseleave=function(){ 55 z++; 56 console.log(‘鼠標移出_onmouseleave‘+z); 57 } 58 //onmousedown -----鼠標按下 59 document.onmousedown=function(){ 60 a++; 61 console.log(‘鼠標按下_onmousedown‘+a); 62 } 63 //onmouseup ------鼠標擡起 64 document.onmouseup=function(){ 65 b++; 66 console.log(‘鼠標按下_onmouseup‘+b); 67 } 68 //onmousemove -----鼠標移動 69 con.onmousemove=function(){ 70 c++; 71 console.log(c); 72 } 73 </script>
二、event事件對象
event對象只在事件發生的過程中才有效
用途：需要獲取和事件相關的信息時使用
如：
獲取鍵盤按下或彈起的按鍵
獲取鼠標的位置坐標
獲取事件名稱
獲取事件生成的日期時間
等等......
event對象中包含了所有與事件相關的信息
所有瀏覽器都支持event對象，只是支持的方式不一樣
- FireFox、Chrome等瀏覽器要獲取到event對象，需要從函數中傳入，參數名隨意
- 而IE在瀏覽器中event作為window對象的一個屬性存在，可以直接使用 event 或 window.event
例如：
document.onmousedown=function ( ev ){
var Event = ev || window.event ; //兼容各個瀏覽器
alert( Event.clientX ) ;// 彈出鼠標相對窗口的X軸坐標
console.log(Event);
};
關於使用event事件的兼容寫法:
1 //IE9以上 谷歌 火狐支持 / IE6、7、8不支持 2 document.onclick=function (ev){ 3 var e=ev; 4 console.log(‘鼠標指針對於瀏覽器頁面的水平坐標‘+e.clientX); } 5 //IE 谷歌支持/ 火狐不支持 6 document.onclick=function (){ 7 var e=window.event||ev; 8 console.log(‘鼠標指針對於瀏覽器頁面的垂直坐標‘+e.clientY); 9 } 10 /*兼容各個瀏覽器，event事件寫法*/ 11 document.onclick=function (ev){ 12 var eve=window.event||ev;//event事件兼容寫法寫法 13 console.log(eve.clientY); 14 console.log(eve.preventDefault); 15 }
三、默認事件
阻止默認事件（阻止使用右鍵事件）
document.oncontextmenu = function(ev) {
var Event=ev||window.event;
if (Event.preventDefault) {
//阻止默認動作(W3C)
Event.preventDefault();
} else{
//IE中阻止默認動作
Event.returnValue=false;
};
alert(‘禁止使用右鍵！‘);
}
四、鍵盤事件（keyCode）
document.onkeydown=function (ev){
var Event=ev||window.event;
alert(Event.keyCode);
}
組合鍵： ctrl + c
Event.ctrlKey&&Event.keyCode==67
1 /*禁止右擊阻止事件的兼容方式寫法*/ 2 document.oncontextmenu=function (ev){ 3 var ev=window.event||ev; 4 if (ev.preventDefault) { 5 ev.preventDefault();//w3c阻止默認事件 6 }else{ 7 ev.returnValue=false;//IE阻止默認事件 8 }; 9 } 10 /*對獲取鍵盤鍵碼的兼容寫法*/ 11 document.onkeydown=function (ev){ 12 var e=window.event||ev; 13 console.log(e.keyCode);//打印鍵碼 14 }
<禁止復制>的練習：
<body> <p id="con">我要的只是簡單地，只是誠實的，好好享受平凡，會好的，一定會好的！我要的只是你愛我，可不是你恨我，哪來的那麽多麻煩!</p> </body> <script> var con=document.getElementById(‘con‘); /*阻止元素右擊事件*/ con.oncontextmenu=function(ev){ var Event=ev||window.event; if (Event.preventDefault) {//阻止默認動作(W3C) Event.preventDefault(); } else{//IE中阻止默認動作 Event.returnValue=false; }; alert(‘禁止使用右鍵！‘); } /*阻止ctrl+c操作*/ document.onkeydown=function(ev){ var e=ev||window.event; if (e.ctrlKey&&e.keyCode==67) { if(e.preventDefault()){ e.preventDefault(); }else { e.returnValue=false; } alert(‘不能這樣操作!‘); } } /*阻止鼠標按下操作*/ document.onmousedown=function(ev){ var e=ev||window.event; if (e.preventDefault()) { e.preventDefault(); } else { e.returnValue=false; } alert(‘禁止鼠標按下!‘) } </script>
五、拖拽效果
主要知識點：
onmousedown onmousemove onmouseup
event.clientX event.clientY
offset client 系列屬性
鼠標拖拽_T:
<head> <meta charset="UTF-8"> <title>鼠標拖拽_T</title> <style> *{margin:0;padding:0;list-style: none;} #dot{ width:80px; height:80px; line-height: 30px; text-align: center; font-size:24px; background: #D00000; color:#fff; cursor:move; position:absolute; left:300; top:100; } </style> </head> <body> <div id="dot"></div> </body> <script> var dot=document.getElementById(‘dot‘); var x,y; var xStart,yStart; var xEnd,yEnd; dot.onmousedown=function(ev){ var e=window.event||ev; x=e.offsetX; y=e.offsetY; dot.onmousemove=function(ev){ var e=window.event||ev; var xEnd=e.clientX-x; var yEnd=e.clientY-y; dot.style.left=xEnd+‘px‘; dot.style.top=yEnd+‘px‘; } } dot.onmouseup=function(){ dot.onmousemove=null; } </script>
鼠標拖拽_M
1 <head> 2 <meta charset="UTF-8"> 3 <title>鼠標事件</title> 4 <style> 5 *{margin:0;padding:0;list-style: none;} 6 #dot{ 7 width:80px; 8 height:80px; 9 line-height: 30px; 10 text-align: center; 11 font-size:24px; 12 background: #D00000; 13 color:#fff; 14 cursor:move; 15 position:absolute; 16 /* left:0; 17 top:0; */ 18 } 19 </style> 20 </head> 21 <body> 22 <div id="dot"></div> 23 </body> 24 <script> 25 var dot=document.getElementById(‘dot‘); 26 var x,y; 27 var l1,t1; 28 var lm,tm; 29 var le,te; 30 var a=true; 31 dot.onmousedown=function(ev){ 32 a=true; 33 var e=window.event||ev; 34 x=e.offsetX; 35 y=e.offsetY; 36 l1=e.clientX-x; 37 t1=e.clientY-y; 38 dot.style.left=l1+‘px‘; 39 dot.style.top=t1+‘px‘; 40 console.log(x,y); 41 } 42 dot.onmousemove=function(ev){ 43 if(a){ 44 var e=window.event||ev; 45 var lm=e.clientX-x; 46 var tm=e.clientY-y; 47 dot.style.left=lm+‘px‘; 48 dot.style.top=tm+‘px‘; 49 } 50 } 51 dot.onmouseup=function(ev){ 52 a=false; 53 } 54 </script>
第53天：鼠標事件、event事件對象