prototype.js+PHPでWEBアプリを作っているのですが、非同期通信の待機状態を表現するため、ページ内でマウスカーソルを砂時計に変化させたいと思っています。ページ全体にcursor:wait; z-index:100;というスタイルのdivブロックをdisplay:inlineで出現させる方法で良さそうだったのですが、divブロックを出現させた瞬間にマウスカーソルを変化させることができません。divブロックが出現した後、自分でマウスを動かすなどしてイベントを起こしてやるまでは、矢印カーソルのままです。JavaScriptで、マウスカーソルを再描画する方法はあるでしょうか。

回答の条件
  • 1人2回まで
  • 登録:2009/05/05 22:14:09
  • 終了:2009/05/11 01:57:20

ベストアンサー

id:i4ooon No.2

regnif回答回数56ベストアンサー獲得回数202009/05/10 22:30:43

ポイント60pt

http://regnif.web.fc2.com/test/changeCursor/

で何かの足しになりますでしょうか?IE7で確認しています。ページを開くと3秒後にマウスカーソルが砂時計に変わります。ついでに背景色も黒に。

prototype.jsはムシ(jQuery派なので)といっても、jQueryすら組み込んでませんが、マウスカーソルを変更するトリガーって、そんなに難しくないと思うんですが・・・

もし意図や背景的にハズしていたらスミマセンm(__)m

いちおう誤解のないようにと思うのは、タイマ(setTimeout)は

> 自分でマウスを動かすなどしてイベントを起こしてやるまでは

という説明があったので「マウスを動かす必要ない」ことを示すために使っています。

FF3.0.8はカーソル移動が必要でしたが、prototype.js(またはjQuery)のコーディングをすればクロスブラウザで対応可能なんじゃないかなぁと思います。

id:yaman135

解決しました。

カーソルを変化させる方法は、style.cursorに'wait'をJavaScriptによって再度代入することでした。

静的にwaitにしておいたものをdisplay='inline'によって出現させるだけではどのブラウザでもダメなようです。

考えてみれば、カーソル移動しないとカーソルが再描画されないという動きは、よく見かけます。

ページ移動によってカーソル位置にリンクが出現した場合とか、スムーズスクロールを実装したアンカーとか。

ブラウザ以外のアプリでは、そういえばあまり見かけない気がします。

あらゆるイベントに応じてカーソル再描画するわけにはいかないというのは、ブラウザの実装の問題として理解できます。

タイマーは例外的なのでしょうね。

あらゆる場面で再描画されないのならば、再描画する方法を用意しておいてほしいですね。

style.cursor='wait'以外にもあるのかもしれませんが、今回はこれで解決とします。

とても参考になりました。ありがとうございました。

2009/05/11 01:55:42

その他の回答(1件)

id:kebo987654 No.1

kebo987654回答回数38ベストアンサー獲得回数102009/05/06 09:25:56

ポイント10pt

イベントが起きると表示が変わるのならdispatchEventやfireEventでイベントを着火してはどうですか?

prototype.js のイベント・トリガー (hPod)

id:yaman135

回答ありがとうございます。

onmousemoveやonclickなどいろいろ着火を試してみたのですが、ハンドラの処理は実行されますが、マウスカーソルは変化しないようです。

もうちょっと考えてみます。

2009/05/06 15:28:58
id:i4ooon No.2

regnif回答回数56ベストアンサー獲得回数202009/05/10 22:30:43ここでベストアンサー

ポイント60pt

http://regnif.web.fc2.com/test/changeCursor/

で何かの足しになりますでしょうか?IE7で確認しています。ページを開くと3秒後にマウスカーソルが砂時計に変わります。ついでに背景色も黒に。

prototype.jsはムシ(jQuery派なので)といっても、jQueryすら組み込んでませんが、マウスカーソルを変更するトリガーって、そんなに難しくないと思うんですが・・・

もし意図や背景的にハズしていたらスミマセンm(__)m

いちおう誤解のないようにと思うのは、タイマ(setTimeout)は

> 自分でマウスを動かすなどしてイベントを起こしてやるまでは

という説明があったので「マウスを動かす必要ない」ことを示すために使っています。

FF3.0.8はカーソル移動が必要でしたが、prototype.js(またはjQuery)のコーディングをすればクロスブラウザで対応可能なんじゃないかなぁと思います。

id:yaman135

解決しました。

カーソルを変化させる方法は、style.cursorに'wait'をJavaScriptによって再度代入することでした。

静的にwaitにしておいたものをdisplay='inline'によって出現させるだけではどのブラウザでもダメなようです。

考えてみれば、カーソル移動しないとカーソルが再描画されないという動きは、よく見かけます。

ページ移動によってカーソル位置にリンクが出現した場合とか、スムーズスクロールを実装したアンカーとか。

ブラウザ以外のアプリでは、そういえばあまり見かけない気がします。

あらゆるイベントに応じてカーソル再描画するわけにはいかないというのは、ブラウザの実装の問題として理解できます。

タイマーは例外的なのでしょうね。

あらゆる場面で再描画されないのならば、再描画する方法を用意しておいてほしいですね。

style.cursor='wait'以外にもあるのかもしれませんが、今回はこれで解決とします。

とても参考になりました。ありがとうございました。

2009/05/11 01:55:42

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません