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>

    运行效果:

  • 相关阅读:
    STL————vector的用法
    DFS,DP————N皇后问题
    DP经典问题—————(LCIS)最长公共上升子序列
    DP————LIS(最长上升子序列)和LCS(最长公共子序列)问题
    CentOS7使用firewalld打开关闭防火墙与端口
    CentOS7下安装MySQL5.7安装与配置(YUM)
    nginx + tomcat +redis 负载均衡遇到问题集锦
    centos 7 安装 tomcat
    centos 7 设置防火墙 开放指定端口
    centos 7 通过yum 安装 nginx
  • 原文地址:https://www.cnblogs.com/le220/p/7594430.html
Copyright © 2011-2022 走看看