第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.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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Keegan小钢

Android样式的开发:layer-list篇

上图Tab的背景效果,和带阴影的圆角矩形,是怎么实现的呢?大部分的人会让美工切图,用点九图做背景。但是,如果只提供一张图,会怎么样呢?比如,中间的Tab背景红色...

1221
来自专栏从零开始学 Web 前端

html学习笔记(一)

单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>

6925
来自专栏GIS讲堂

C#控件命名规范

1、 本规范是个人平时使用时为方便个人使用而制定的一套规范,有很多地方不易记忆与理解,后续在具体的使用过程中会做一定的改动。

2353
来自专栏python学习之旅

Python+Selenium笔记(六):元素定位

(一)  前言 Web应用以及包含超文本标记语言(HTML)、层叠样式表(CSS)、JS脚本的WEB页面,基于用户的操作(例如点击提交按钮),浏览器向WEB服务...

4808
来自专栏知道一点点

【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 内联表单</title> <link hre...

1112
来自专栏欧科云

让你的网站文字“抖”起来

最近听说了一款挺火的软件,叫 “抖音”,发现它的标志有蓝红双色的叠加。我突然想到,我们的网站文字能否做出这个效果,甚至让文字像这个一样抖起来?答案当然是可以的。

1073
来自专栏水击三千

浅谈JavaScript的事件(事件委托)

  事件处理程序为Web程序提供了系统交互,但是如果页面中的事件处理程序太多,则会影响页面的性能。每个函数都是对象,都会占用内存,内存中对象越多,性能越差。需要...

2607
来自专栏十月梦想

bootstrap之图片的响应式

前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

994
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(三)表单

table>tr3>td5 + tab键  <!-- 建立3行5列的表格 -->

3783
来自专栏奇梦博客

调整XiunoBBS上传大尺寸图片加水印错位和水印透明度 配置 JavaScript Xiu

1313

扫码关注云+社区

领取腾讯云代金券