clientX/clientY 与 screenX/screenY 的区别

clientX/clientY 与 screenX/screenY 的区别

在JavaScript当中有时候我们需要获取鼠标悬停的位置,以此来做一些特殊处理。这时候就需要用到MouseEvent对象。MouseEvent对象提供了两组属性来定位鼠标的位置:clientX/clientY和screenX/screenY。除了这两组属性我们经常还会用到pageX/pageY和offsetX/offsetY这两组属性也是用来定位鼠标的,那么他们究竟有什么异同呢。

属性说明

  • clientX/clientY

    名称 说明 返回
    clientX 返回事件触发时鼠标相对于元素视口 的X坐标 数值
    clientY 返回事件触发时鼠标相对于元素视口 的Y坐标 数值

    这里的元素视口实际上代指就是浏览器,clientX是鼠标距离浏览器左边框的距离,clientY是鼠标距离浏览器上边框的距离。

  • screenX/screenY

    名称 说明 返回
    screenX 返回事件触发时鼠标相对于屏幕 的X坐标 数值
    screenY 返回事件触发时鼠标相对于屏幕 的Y坐标 数值

    顾名思义,screenX是鼠标距离显示器屏幕左边框的距离,screenY是鼠标距离显示器屏幕上边框的距离。

  • pageX/pageY

    名称 说明 返回
    pageX 返回事件触发时鼠标相对于文档 的X坐标 数值
    pageY 返回事件触发时鼠标相对于文档 的Y坐标 数值

    所谓文档可以简单的理解为浏览器中的页面内容,pageX是鼠标距离文档左侧的距离,pageY是鼠标距离文档上侧的距离,如果我们将鼠标悬停在浏览器中间,通过滚轮滚动浏览器,那么尽管没有移动鼠标的位置而pageY一直在变化,因为相对文档顶部的距离一直在变化。

  • offsetX/offsetY

    名称 说明 返回
    offsetX 返回事件触发时鼠标相对于事件指向元素 的X坐标 数值
    offsetY 返回事件触发时鼠标相对于事件指向元素 的Y坐标 数值

    假设有一个元素

    test

    当鼠标进入元素中触发事件时这是offsetX指的就是鼠标到P元素左边的距离。但是这个属性并不是标准属性,因此IE和chrome对这个属性的支持并不一样。在chrome中offsetX和offsetY的值均为整数,而在IE中值为小数形式,并且如果元素有border属性也会影响到offsetY的计算。

示例代码

mouseover.html


<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>title>
  <link type="text/css" href="../css/test.css" rel="stylesheet">
  <script src="../js/jquery-2.1.4.js">script>
  <script src="../js/eventtest.js">script>
head>
<body>

<div class="container">

  
  <div class="section" >
  div>
  <hr>
  <div class="section" >
    <h3>clientX 和 screenXh3>
    <div class="example">
      <p id="position">
        please move mouse into this area.<br />
        clientX是到浏览器左侧的距离,screenX是到显示屏左侧的距离。通过缩小浏览器的大小可以明显看出变化
      p>
    div>
  div>
div>
body>
html>

test.css

div.container{
    width:980px;
    margin-left: auto;
    margin-right: auto;
}
div.example{
    height: 100px;
    border:solid 1px #ccc;
    background:#f8f8f8;
}

pre{
    border:solid 1px #ccc;
    background:#f8f8f8;
}

#banana{
    font-family: FreeSerif;
    font-size: 20px;
    background: yellow;
}

#position{
    border:solid 1px #ccc;
    margin-left: 20px;
}

eventtest.js

/**
 * Created by qiumingsheng on 2015/8/27.
 */

$(function(){

    $('#position')[0].addEventListener("mousemove",handlePositionEvent);
    $('#position')[0].addEventListener("mouseout",handlePositionEvent);
    function handlePositionEvent(e){
        if(e.type == 'mousemove'){
            $(e.target).html("clientX:"+ e.clientX+"  clientY:"+e.clientY
                +"
"
+"screenX:"+ e.screenX +" screenY:"+e.screenY +"
"
+"pageX:"+ e.pageX+" pageY:"+e.pageY +"
"
+"offsetX:"+ e.offsetX+" offsetY:"+e.offsetY); }else{ $(e.target).text(" please move mouse into this area."); } }; });

你可能感兴趣的:(javascript)