マウスポインターを特定の位置に移動しますか?


127

私はHTML5ゲームを構築していて、特定のイベントの特定のコントロールの上にマウスカーソルを置いて、特定の方向に移動しても常に同じ結果が得られるようにしています。これは可能ですか?


私が正しく理解している場合、JSを使用してマウスカーソルを移動する必要があります。これは不可能です。別の方法を見つける必要があります。
thirtydot 2011年

1
HTML5にはいくつかの新しいマウスイベントがありますが、マウスを動かすものはありません。あなたはいつでもwindow.moveBy(x、y); マウスを置いた場所の下にあるウィンドウを移動するには、これはかなりファンキーなゲームになります。
ジェレミー・トンプソン

1
いいえ-JavaScriptではそれはできませんが、ウィンドウのscrollTo()を使用して、ページを特定の場所に移動し、カーソルも「移動」するという回避策があると思います-w3Schoolsを参照してくださいでw3schools.com/jsref/met_win_scrollto.asp
スターダスト

1
スマートフォンでマウスを動かして頑張ってください。
・クール

マウスポインタの画像を移動して、cursor:noneを設定できます。あなたはプログラマーなので、セキュリティ上のリスクはありません。ゲームを作成できれば、ゲームのプレイ中に銀行口座をクリックするリスクも回避できます。

回答:


20

したがって、これは古いトピックであることはわかっていますが、最初は不可能だと言います。現在最も近いのは、マウスを単一の位置にロックし、xとyの変化を追跡することです。このコンセプトは、ChromeとFirefoxに採用されています。これは、マウスロックと呼ばれるものによって管理されており、エスケープを押すと壊れます。私から簡単に読みアップ、私はアイデアは、それが一つの場所にマウスをロックし、イベントアンドドラッグクリックに似たモーションイベントをレポートしていることだと思います。

リリースドキュメントは次のとおりです
。FireFox:https : //developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome:http : //www.chromium.org/developers/design-documents/mouse-lock

そして、ここにはかなりきちんとしたデモがあります:http : //media.tojicode.com/q3bsp/


これは、すべてのブラウザーでサポートされているわけではありませんが、これがまさに私が求めていたユースケースであるため、これを新しい受け入れられた回答として採用します。
Dennkster

186

JavaScriptでマウスポインタを動かすことはできません。

可能であれば、1秒の影響について考えてください;)

  1. ユーザーは「このリンクをクリックしたい」と考えています。
  2. JavaScriptはマウスカーソルを別のリンクに移動します
  3. ユーザーが間違ったリンクをクリックして、Cドライブをフォーマットしてキャンディーを食べるマルウェアを誤ってダウンロードした

74
リアルクリックジャッキング。
ブレンダー2011年

15
考えてみてください。これはすばらしいでしょう:P
マーティンイェスパーセン'20年

24
ねえ、私はマウスカーソルを制御するための戦いを嫌います。
ブレンダー

78
Webページは、誰もがリンクをクリックすることを必要とせずにダウンロードを強制することができるので、あなたが主張するのは実際にはセキュリティの問題ではありません。ただし、Webページウィンドウの外に移動できないのは事実です。
dionyziz

11
@dionyziz:サンドボックスへの強制ダウンロードと、ユーザー操作によって開始されるユーザースペースダウンロードの間には、かなり大きな違いがあります。セキュリティへの影響は実際には非常に大きなものです。
Martin Jespersen

87
  1. クライアントマシンで小さなWebサーバーを実行します。100kbの小さなものでもかまいません。Python / Perlスクリプトなど
  2. マウスを動かすことができる、コンパイル済みの小さなC 実行可能ファイルを含めます
  3. 単純なhttp呼び出し、AJAXなどを介してCGIスクリプトとして実行します。たとえば、マウスを移動する座標を指定します。

    http://localhost:9876/cgi/mousemover?x=200&y=450

PS:どんな問題についても、何故、どのように、そして何ができないのか、何ができないのか、何百もの言い訳があります。しかし、この無限の宇宙では、それは本当に決断の問題です。それを実現します。


13
「c実行可能ファイル」までは全員が一緒にいたと思います... xD
dGRAMOP 2017

1
Webサーバー?たぶん、あなたはhttpインターフェースを備えたプログラムを意味します。Goプログラミング言語は、http部分を簡単に追加できるという点でCよりも有利かもしれません。あるいは、nodejsインタープリターは、簡単に作成できるように構築されているため、httpインターフェースも簡単に含めることができるコードを実行します。サーバーアプリケーションを記述します。
Barlop

3
C = 0の依存関係。ウェブはhttpです。ここにはかわいいホームページはありません。
アレックスグレイ

PSの+1。ノードdev-serverまたは同様のnpmjs.com/package/http-serverを使用してCGI呼び出しを実行できますか?
ATHER、

Javascript質問の下のタグに気づいた人はいますか?

80

実際の(システム)マウスカーソルを使用しなかった場合は、画面の特定の領域にマウスカーソルを配置できると思います。

たとえば、カーソルの代わりに機能する画像を作成し、シーンへのマウス入力を検出したときにシステムカーソルのスタイルを「なし」に設定するイベントを処理できます(sceneElement.style.cursor = 'none')にし、非表示の画像要素が機能するようにします。事前定義された軸/境界ボックスの移動に基づいて、シーン内のどこにでも配置できるカーソルとして。

この方法では、実際のカーソルをどのように移動しても、変換方法によって、必要な場所に画像カーソルが保持されます。

編集:画像表現とマウスの強制移動を使用したjsFiddleの例


5
はい、できます。特定の要素のカーソルスタイルを 'none'に設定するだけです。試してみる。
Xaxis、2011年

14
これが最も思慮深い答えです。そして、いくつかの他の回答が本当に任意の値を追加します:)しかし、我々は任意のマウスロックを取得カント際にどのように...音はかなり制限することを、FPSなどのような面白いゲームをもたらすWebGLのでしょう点在しながら、実際には、真の解決策を提供します
Dennkster

3
それでも、マウスを左に「動かし続ける」ことができないという問題があります。マウスがWebページから離れると、それを制御し続けることができなくなります。
dionyziz

2
これはこの問題の完璧な解決策です。文句を言う人がいる唯一の理由は、それが簡単な解決策ではないからです。あなたは時々みんなプログラミングをしなければなりません!
マーティ


65

すばらしい質問です。これは、JavaScriptブラウザAPIに欠けているものです。私もチームとWebGLゲームに取り組んでおり、この機能が必要です。マウスのロックを可能にするAPIの可能性について話し合うことができるように、Firefoxのバグジラに関する問題を開きました。これは、そこにいるすべてのHTML5 / WebGLゲーム開発者に役立ちます。

必要に応じて、こちらに来て、フィードバックとともにコメントを残し、問題に賛成票を投じます。

https://bugzilla.mozilla.org/show_bug.cgi?id=630979

ありがとう!



51
この場合、ブラウザの使用を中止します。:-P真剣に、ウェブサイトはあなたがアプリケーションをインストールするときにあなたが与えている種類の同意を必要としません。これは、私たち全員がこのレベルの制御を使用してユーザーエクスペリエンスを向上させるだけの優れた機能を備えている場合には、優れた機能です。残念ながら、インターネットはくそったれ中心です。そのため、ブラウザーには決して表示されないはずの本当にきちんとした機能がたくさんあります。つまり、フルスクリーンAPIは、残りのOSを「ロックアウト」するように機能します。
2015年

4
@Someone Consentは、アプリケーションによってそのようなロックが可能になる前に要求されます(現在、一般的なWebブラウザで全画面の同意が要求される方法と同様)。さらに、ユーザーはいつでもESCキーを押して同意を取り消すことができます。
dionyziz 2015年

7
それが起こった。そしてそれはかなり素晴らしい(まだベンダープレフィックスが付いている場合):mdn.github.io/pointer-lock-demo
ericsoco

1
@ericsoco残念ながらそのリンクは壊れています。これは役立つかもしれません:https
Tian van Heerden

46

マウスポインターの位置を検出し、Webページを(本体の相対位置で)移動して、クリックしたいものにカーソルを合わせることができます。

例として、このコードをブラウザコンソールの現在のページに貼り付けることができます(後で更新できます)

var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
    $(this).css({
        position: 'relative',
        left: (event.pageX - upvote_position.left - 22) + 'px',
        top: (event.pageY - upvote_position.top - 35) + 'px'
    });        
});

2
それを実行するコード例を投稿できれば、投稿の価値が高まります。また、よくある質問を
ご覧

ユーザーがクリックしたら、実際にはどのようにして正しい要素をクリックしますか?
mmm

@momomo使用できますdocument.getElementByID('thingtoclick').click();
カスケードスタイル

1
それは完全に素晴らしいものでした!ボックスの外側で考える方法!それが質問者が望んでいたものを本当に提供しているとは思えませんが、誰もが本当に気にかけているほどクールでしたか?
gcdev

12

マウスを動かすことはできませんが、ロックすることはできます。注:クリックイベントでrequestPointerLockを呼び出す必要があります。

小さな例:

var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

ドキュメントと完全なコード例:

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API


4

JavaScriptを使用してマウスポインターを移動することはできないため、セキュリティ上の理由から明らかです。この効果を実現する最良の方法は、実際にコントロールをマウスポインターの下に置くことです。


1
セキュリティへの影響は明白ではありません。実際、最近の標準への追加により、深刻なセキュリティ問題なしにこの機能が導入されました。
dionyziz 2013

しかし、ドラッグアンドドロップAPIではどのように可能ですか?
oldboy '11

0

これは、マウスポインターの実際の位置を取得し、この補正に基づいてスプライト/シーンマウスのアクションを計算して補正することによって簡単に実行できませんか?

たとえば、マウスポインターを中央下にする必要がありますが、左上にあります。カーソルを非表示にし、シフトしたカーソル画像を使用します。カーソルの動きをシフトし、マウス入力をマッピングして、再配置されたカーソルスプライト(または「コントロール」)のクリックに一致させます。カーソルが実際に希望するポイントに当たった場合は、補正を削除します。

免責事項であり、ゲーム開発者ではありません。


Xaxisの回答と基本的に同じです。
mathheadinclouds

@mathheadincloudsは確かに、ブラウザのマウスロックの実装とは無関係です。つまり、本質的には; だがしかし。ご意見ありがとうございます。-編集:気にしないでください。あなたの言っていることがわかります。私の考えでは、私の考えは、これは役に立たないということではないでしょう。Xaxisの回答よりも、素人の方が多いです。
Eric Shoberg
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.