zoukankan      html  css  js  c++  java
  • 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

    鼠标事件
    鼠标事件有下面这几种:

    1. onclick
    鼠标点击事件

    box.onclick = function(e){
      console.log(e)
    }
    2. onmousedown
    鼠标按下事件

    box.onmousedown = function(e){
      console.log(e)
    }

    3. onmouseup
    鼠标松开事件

    box.onmouseup = function(e){
      console.log(e)
    }


    4. onmousemove
    鼠标移动事件

    box.onmousemove = function(e){
      console.log(e)
    }

    5. onmouseover
    鼠标经过事件

    box.onmouseover = function(e){
      console.log(e)
    }

    6. onmouseout
    鼠标划出事件

    box.onmouseout = function(e){
      console.log(e)
    }

    根据以上打印的e的信息,大致为:

    由鼠标事件(MouseEvent)可以发现:
           其中包含了许多的坐标,且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标,以及它们的含义。

    一、clientX、clientY
    点击位置距离当前body可视区域的x,y坐标

    二、pageX、pageY
    对于整个页面来说,包括了被卷去的body部分的长度

    三、screenX、screenY
    点击位置距离当前电脑屏幕的x,y坐标

    四、offsetX、offsetY
    相对于带有定位的父盒子的x,y坐标

    五、x、y
    和screenX、screenY一样

    如图所示:


  • 相关阅读:
    我为何需要使用空接口?
    Castle 整合.NET Remoting
    MVC结构简介
    在asp.net页面上得到Castle容器的实例
    Castle.MVC框架介绍
    08.vue-router动态路由匹配
    07. vue-router嵌套路由
    06.路由重定向
    04 Vue Router路由管理器
    ES6新特性之 let 、const
  • 原文地址:https://www.cnblogs.com/zzsdream/p/10906005.html
Copyright © 2011-2022 走看看