人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: yaman135
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:INDEX JavaScript PHP prototype.js Web
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kebo987654
●10ポイント

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

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

◎質問者からの返答

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

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

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


2 ● regnif
●60ポイント ベストアンサー

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

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

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

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

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

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

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

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

◎質問者からの返答

解決しました。

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

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

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

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

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

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ