ScreenToClientの使用方法を教えてください。

2年 ago
海斗, 葵
1 minute

ScreenToClientはページ上の座標をウィンドウあるいはクライアント領域からの相対座標に変換するJavaScriptのメソッド。マウスイベントと合わせて使用され、ユーザの操作位置を特定する。

screentoclient メソッドを使用するコードのサンプルを以下に示します。

// 获取一个 DOM 元素
let element = document.getElementById('myElement');

// 添加鼠标点击事件监听器
element.addEventListener('click', function(event) {
  // 使用 screentoclient 方法将鼠标点击位置的坐标转换为相对于窗口的坐标
  let x = event.screenX;
  let y = event.screenY;
  let clientX = event.target.screentoclient(x, y).x;
  let clientY = event.target.screentoclient(x, y).y;

  // 打印相对于客户端区域的坐标
  console.log('客户端坐标：x=' + clientX + ', y=' + clientY);
});

挙げられた例では、マウスのクリックイベントがユーザーが element をクリックした時に発生し、 ScreenToClient メソッドがマウスのクリック位置の画面座標をクライアント領域の相対座標に変換します。 その後、相対座標が print 文で出力されます。

bannerAds