JavaScript を使用してマウス ポインターを特定の位置に移動する
JavaScript では、マウス ポインタを特定の位置に移動する方法がないことに注意してください。 主な理由は、ユーザーにセキュリティ上の問題を引き起こし、ユーザー エクスペリエンスを損なう可能性があることです。
この記事では、既定のシステムのマウス ポインターに似た偽またはカスタムのマウス ポインターを作成し、JavaScript を使用してその位置を別の位置に移動します。 マウス ポインタを特定の位置に移動するこの手法は、デモンストレーションを目的としており、本番対応の Web サイトでは完全に避ける必要があります。
CSS スタイルを使用して基本的な HTML 構造を作成する
画面に 2つのボタン (画面の左側と右側に 1つ) を作成します。目的は、最初のボタンをクリックすると、マウス ポインターが自動的に画面上の 2 番目のボタンに移動することです。 画面。
まず、HTML 内に 2つの HTML 要素を作成します。1つは img タグで、もう 1つは div 要素です。 img タグには、元のシステム マウス カーソルの代わりに使用されるカスタム カーソルまたは偽のカーソルの画像が含まれます。
インターネットから取得した任意のマウス カーソル画像を使用できます。 div には、"button 1" と "button 2" の 2つのボタンが含まれます。
また、これらすべての要素に id を付与して、JavaScript 内でそれらを参照し、CSS 内でスタイルを設定できるようにします。
コード スニペット - HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Move mouse pointer</title>
<style>
* {
cursor: none;
}
.block{
display: flex;
justify-content: space-between;
}
img {
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<img id="cursor" src="./mouse_cursor.png" width="16" height="22" />
<div class="block">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
</div>
</body>
</html>
CSS 内では、CSS ユニバーサル セレクターとしても知られるアスタリスク (*) 内の cursor: none CSS プロパティを使用して、元のシステムのマウス ポインターをページ全体から非表示にします。 次に、フレックスボックスを div 要素に追加して、それらの間にスペースができるようにします。
img タグで、カスタム カーソルは pointer-events: none プロパティを追加して、ポインター イベントが適用されないようにします。 MDN で pointer-events の詳細を確認できます。画面上のどこにでも移動できるように、絶対的なものにします。
JavaScript を使用してマウス ポインターを特定の位置に移動する
JavaScript を使用してその機能を実装しましょう。 最初に、JavaScript 内の getElementById() メソッドを使用して、すべての要素カーソル btn1 と btn2 を取得します。
マウスカーソルを特定の位置、この場合は ボタン 2 に移動したいので、まず ボタン 2 の位置 (左、上、幅、高さ) を取得して、クリックしたときに ボタン 1、マウス ポインターは自動的に ボタン 2 に移動します。
このために、btn2 で getBoundingClientRect() メソッドを使用します。これにより、左、上、下、幅、高さなどのさまざまな位置と寸法を含むオブジェクトが提供されます。 rect と呼ばれる変数内のこのオブジェクト。 次に、button 2 の finalPositionX と finalPositionY を計算し、button 1 をクリックしたときにマウス ポインタを button 2 の中心に移動できるようにします。
カスタム マウス ポインターは、この位置では画面上を移動しません。 ブラウザ上で自由に動かせるようにするには、window オブジェクトにイベント リスナーを追加する必要があります。
このメソッドは 2つのパラメーターを受け取ります。1つ目は関数を実行するイベントのタイプで、2つ目はそのイベントがトリガーされたときに実行される関数自体です。
カスタム マウス ポインターを移動したいので、mousemove イベントを最初のパラメーターとして使用し、コールバック関数内で clientX と clientY 座標を取得し、次に割り当てます。 以下に示すように、カスタム マウス ポインターの 左 と 上 の位置に移動します。
末尾に "px" を追加することを忘れないでください。 そうしないと、機能しません。
コード スニペット - JavaScript:
let cursor = document.getElementById('cursor');
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width / 2;
let finalPositionY = rect.top + rect.height / 2;
// Moving our custom mouse pointer
window.addEventListener('mousemove', (e) => {
x = e.clientX;
y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
btn1.addEventListener('mouseup', (e) => {
cursor.style.left = finalPositionX + 'px';
cursor.style.top = finalPositionY + 'px';
})
この段階で、カスタム マウス カーソルは通常のマウス カーソルとして移動します。 ここで、カスタム マウス カーソルを特定の位置に移動します。
そのために、btn1 に mouseup イベントを追加し、finalPositionX と finalPositionY の位置でマウス カーソル left と top の位置を設定します。
出力：
まとめ
いくつかの欠点があるため、JavaScript を使用してマウスの位置を直接変更する方法はありません。 しかし、プログラミングには常に、さまざまな非公式の方法があります。
マウス ポインターを特定の位置に移動する問題を解決するには、元のマウス ポインターを非表示にする必要があります。 次に、2つのカスタム マウス ポインターを作成し、特定の位置に移動させる JavaScript コードを記述します。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn