第43天:事件对象event

一、事件对象 事件:onmouseover、 onmouseout、 onclick event //事件的对象

兼容写法:var event = event || window.event;

event常见属性,如下表:

属性

作用

data

返回拖拽对象的URL字符串(dragDrop)

width

该窗口或框架的高度

height

该窗口或框架的高度

pageX

光标相对于该网页的水平位置(ie无)

pageY

光标相对于该网页的垂直位置(ie无)

screenX

光标相对于该屏幕的水平位置

screenY

光标相对于该屏幕的垂直位置

target

该事件被传送到的对象

type

事件的类型

clientX

光标相对于该网页的水平位置 (当前可见区域)

clientY

光标相对于该网页的水平位置

二、pageX、 clientX、 screenX的区别

1、screenX 、screenY电脑屏幕为基准

2、pageX 、pageY文档(绝对定位)为基准 IE6、7、8不认识 3、clientX、   clientY可视区域为基准

三、其他事件

div.onmouseover 和div.onmousemove   区别  

相同点都是 经过  div 才会触发

 div.onmouseover 只触发一次

div.onmousemove 每移动一像素,就会触发一次

 onmouseup 当鼠标弹起   

onmousedown 当鼠标按下的时候  

   1、拖动 原理 ==   鼠标按下  接着 移动鼠标 。

   bar.onmousedown = function(){

            document.onmousemove = function(){

            }

}

当我们按下鼠标的时候,就要记录当前 鼠标 的位置 - 大盒子的位置 

1、 算出  bar  当前 在  大盒子内的距离 。

 三、防止选择拖动

我们知道 按下鼠标然后拖拽可以选择文字 的。

清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

案例:

1、鼠标点击跟随动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>鼠标点击跟随效果</title>
 6     <style>
 7         #image{
 8             width: 88px;
 9             position: absolute;
10             left: 0;
11             top:0;
12         }
13     </style>
14 </head>
15 <body>
16 <img src="img.jpg" alt="" id="image">
17 </body>
18 </html>
19 <script>
20     /*document.onclick=function(event){
21         var event=event||window.event;
22         console.log(event.pageX);
23         console.log(event.clientX);
24         console.log(event.screenX);
25 
26     }*/
27 
28     var image=document.getElementById("image");
29     document.onclick=function(event){
30         var event=event||window.event;
31         targetX=event.clientX-image.offsetWidth/2;
32         targetY=event.clientY-image.offsetHeight/2;
33     }
34     //缓动动画
35     var leaderX=0;
36     var leaderY=0;
37     var targetX=0;
38     var targetY=0;
39     setInterval(function(){
40         leaderX=leaderX+(targetX-leaderX)/10;
41         leaderY=leaderY+(targetY-leaderY)/10;
42         image.style.left=leaderX+"px";
43         image.style.top=leaderY+"px";
44     },10)
45 
46 </script>

运行效果:

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

echarts仪表盘更换样式全圆形换成半圆

问题:想把图一的仪表盘默认样式换乘图二半圆的这个样式。官网中通过更换主题按钮切换的仪表盘样式,但是没有实际的demo~具体是怎么实现更换样式的?

6941
来自专栏js编程在工科课程中的简单应用

2.2.4 HTML5 Canvas绘图基础

Canvas是HTML标准近年发展到HTML5时添加的新特性,用于在网页上高效绘图。H5 canvas绘图,与MFC(Microsoft Foundation ...

1292
来自专栏HTML5学堂

Canvas 基本绘制(上)

HTML5学堂:之前的文章与大家分享了SVG的一系列操作,但是SVG也是存在一些劣势,所以今天开始为大家分享介绍HTML5 Canvas的相关知识,Canvas...

39513
来自专栏用户2442861的专栏

QLineEdit 输入验证(相关的设置)

LineEdit提 供一个文字输入栏位,可以输入文字或数字,我们可以对输入作验证,或是设定为一般显示、密码显示等等,以下的程式是个简单的设定示范:

3502
来自专栏天天

20171019

773
来自专栏卡少编程之旅

css黑魔法简略版

30711
来自专栏進无尽的文章

UI篇-UINavigationController之易忘补充

[UIApplication sharedApplication].statusBarHidden = YES;

2242
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

1332
来自专栏阮一峰的网络日志

CSS使用技巧

在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用...

1881
来自专栏js编程在工科课程中的简单应用

2.2.4 HTML5 Canvas绘图基础

Canvas是HTML标准近年发展到HTML5时添加的新特性,用于在网页上高效绘图。H5 canvas绘图,与MFC(Microsoft Foundation ...

1280

扫码关注云+社区

领取腾讯云代金券