當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

第53天：鼠标事件、event事件对象

發布時間：2024/4/17 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了第53天：鼠标事件、event事件对象小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

-->鼠標事件
-->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.οnmοusedοwn=function (?ev?){
var Event = ev || window.event ; //兼容各個瀏覽器
alert( Event.clientX ) ;// 彈出鼠標相對窗口的X軸坐標
console.log(Event);
};
關于使用event事件的兼容寫法:

1 //IE9以上谷歌火狐支持 / IE6、7、8不支持 2 document.οnclick=function (ev){ 3 var e=ev; 4 console.log('鼠標指針對于瀏覽器頁面的水平坐標'+e.clientX); } 5 //IE 谷歌支持/ 火狐不支持 6 document.οnclick=function (){ 7 var e=window.event||ev; 8 console.log('鼠標指針對于瀏覽器頁面的垂直坐標'+e.clientY); 9 } 10 /*兼容各個瀏覽器，event事件寫法*/ 11 document.οnclick=function (ev){ 12 var eve=window.event||ev;//event事件兼容寫法寫法 13 console.log(eve.clientY); 14 console.log(eve.preventDefault); 15 }

三、默認事件

阻止默認事件（阻止使用右鍵事件）

四、鍵盤事件（keyCode）

document.οnkeydοwn=function (ev){
　　var Event=ev||window.event;
　　alert(Event.keyCode);
}

組合鍵： ctrl + c
Event.ctrlKey&&Event.keyCode==67

1 /*禁止右擊阻止事件的兼容方式寫法*/ 2 document.οncοntextmenu=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.οnkeydοwn=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>

轉載于:https://www.cnblogs.com/le220/p/7668342.html

總結

以上是生活随笔為你收集整理的第53天：鼠标事件、event事件对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java日志框架log4j详细配置及与s
下一篇：最有二叉树哈夫曼树