詳しい人求む！

「event.clientX」と「event.screenX」の違い

解決済

質問者：re97
質問日時：2016/09/01 10:38
回答数：1件

・何れも、スクロールすると、基準位置は移動？

・「クライアント」と「スクリーン」の違いとは何でしょうか？

・画面サイズを手動で小さくした時、「event.clientX」は影響ないけど「event.screenX」は影響を受ける、ということでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2016/09/01 12:40

こんにちは

＞「クライアント」と「スクリーン」の違いとは何でしょうか？
基準がスクリーン座標系かビューポート座標かの違いのようですね。
https://w3c.github.io/uievents/#interface-mousee …

＞何れも、スクロールすると、基準位置は移動？
ウィンドウの表示位置もスクロールも原点位置には直接は影響しません。
（表示内容を主体に考えると、自分が移動するので影響するとも言えますが…）

以下に、確認用のサンプルを作ってみました。
クリックすると、その位置のscreenXとclientXを表示するようにしてあります。
　・ウィンドウの位置を移動
　・表示内容ををスクロール
などによる、座標値の変化を確認してみてください。

※「++ クリックテスト ++」の文字は、クリック位置の目安とするためにposition:fixedにしてあります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
html, body { width:150%; height:150%; background-color:#FFD; }
#hoge { position:fixed; top:50px; left:100px; }
</style>

<script type="text/javascript">
document.addEventListener("click", function(e){
alert("screenX=" + (e.screenX|0) + "\nclientX=" + (e.clientX|0));
}, false);
</script>

</head>
<body>
<div id="hoge">++ クリックテスト ++</div>
</body>
</html>