clientX/clientYとscreenX/screenYの違い

9495 ワード

javascript

clientX/clientYとscreenX/screenYの違い
JavaScriptの中には、マウスのサスペンションの位置を取得して、特殊な処理をする必要があります.この時はMouseEventオブジェクトを使う必要があります.MouseEventオブジェクトは、マウスの位置を特定する2つの属性を提供します.clientX/clientYとscreenX/screenY.この2つの属性以外にも、私たちはよくPageX/pageYとoffsetX/offsetYの2つの属性を使ってマウスの位置を決めるのですが、彼らは一体何の違いがありますか?
属性の説明

clientX/clientY
名前
説明
戻る
client X
イベントトリガーを返すと、マウスは元素の視角に対するX座標を返します.
数値
client
イベントトリガーを返すと、マウスは元素の視認口に対するY座標を返します.
数値
ここの元素の視口は実際上の世代はブラウザーで、clientXはマウスとブラウザの左の枠の距離で、clientYはマウスとブラウザの上の枠の距離です.

screenX/screenY
名前
説明
戻る
screenX
イベントトリガーを返すと、スクリーンに対するマウスのX座標が表示されます.
数値
screenY
イベントトリガーを返すと、スクリーンに対するマウスのY座標が表示されます.
数値
名前の通り、screenXはマウスとディスプレイの画面の左の枠の距離で、screenYはマウスとディスプレイの画面の上の枠の距離です.

pageX/pageY
名前
説明
戻る
pageX
イベントトリガーを返すと、ドキュメントに対するマウスのX座標が返されます.
数値
pageY
イベントトリガーを返すと、ドキュメントに対するマウスのY座標が表示されます.
数値
文書とは、ブラウザのページの内容を簡単に理解することができます.PageXはマウスとドキュメントの左側の距離です.PageYはマウスとドキュメントの上側の距離です.もしマウスをブラウザの間に置いて、スクロールブラウザを通じて、マウスの位置を移動していないにもかかわらず、ドキュメントの上の距離に対してずっと変化しています.

offsetX/offsetY
名前
説明
戻る
オフセット
イベントトリガーを返すと、マウスはイベントに対して要素のX座標を指します.
数値
オフセット
イベントトリガーを返すと、イベントに対するマウスポインタのY座標が表示されます.
数値
要素 testがマウスが要素に入ってイベントをトリガすると、オフセットXはマウスからP要素の左側までの距離を指していると仮定する.しかし、この属性は標準属性ではないので、IEとchromeのこの属性に対するサポートは違っています.chromeではoffsetXとoffsetYの値は整数であり、IEでは小数で表されており、要素がborder属性であればoffsetYの計算にも影響を与える.

サンプルコード
mouseover.


<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におけるオブジェクトの配列変更方法