zoukankan      html  css  js  c++  java
  • 第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>

    运行效果:

  • 相关阅读:
    VUE-路由配置及跳转方式
    VUE使用axios请求后端数据
    springboot图片/文件上传
    java中return;语句的作用
    使用maven搭建ssm框架环境
    Java和Tomcat安装教程
    安装tomcat出现的问题
    关于 == 和 equals() 的区别
    关于从request对象中获取路径的问题
    栈和队列_leetcode20
  • 原文地址:https://www.cnblogs.com/le220/p/7594430.html
Copyright © 2011-2022 走看看