-->鼠标事件 -->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对象,只是支持的方式不一样
例如: 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>