<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><section><h1>onmousemove 属性 (HTML, XHTML 1)</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML</anchor> のほとんどの要素で用意されている 
<dfn><code class="HTMLa">onmousemove</code> 属性</dfn>は、
<rubyb xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">指示装置<rt xmlns="http://www.w3.org/1999/xhtml">pointing device</rt></rubyb>がある<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>の上で
(その要素から出入りせずに) 動かされた時に発生する<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">事象</anchor>に関する<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">内在事象</anchor>属性です。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> 仕様書:<ul><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML 4</anchor><ul><li><code class="HTMLa">onmousemove</code> 属性
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="HTML4:&quot;interact/scripts.html#adef-onmousemove&quot;" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="IW">IW:HTML4:&quot;interact/scripts.html#adef-onmousemove&quot;</anchor-external></li></ul></li></ul></p><section><h1>代替</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> 内在事象属性は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">表現と構造の分離</anchor>の原則に反するので、
好ましくないと考える人もいます。また、 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">DOM 0</anchor>
に基づく古い設計です。</p><p>代わりに、 <code class="HTMLe"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">script</anchor></code> 要素などにより関連付けたスクリプト内で
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">DOM 2</anchor> 以上の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">事象</anchor>に関するメソッド等が利用できます。
DOM 水準2 や DOM 水準 3 はこの属性に対応する
DOM の事象 <code class="DOM"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mousemove</anchor></code> を用意しています。</p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>属性値</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> この属性の値は <code class="SGML">%<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Script</anchor></code> です。 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">SGML</anchor>
的には <code class="SGML"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CDATA</anchor></code> です。
自称が発生したときに実行するスクリプトの code
を記述します。<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクリプト言語</anchor>は、
<code class="HTTP"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Content-Script-Type</anchor></code> によります。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> この属性は省略可能です。</p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>関連</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> この属性に対応する DOM の事象は <code class="DOM"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mousemove</anchor></code>
です。そちらもあわせてごらんください。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> 別の要素に移動したときには <code class="HTMLa"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">onmouseout</anchor></code> 
事象が、別の要素から移動してきたときには <code class="HTMLa"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">omouseover</anchor></code>
事象が発生します。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="8" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[8]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ドラッグ・アンド・ドロップ</anchor>を<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクリプト</anchor>により実装したい時には、
<code class="DOMe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mousemove</anchor></code> と <code class="DOMe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mousedown</anchor></code>,
<code class="DOMe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mouseup</anchor></code> を組み合わせると便利です。</p><comment-p xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:"><code xmlns="http://www.w3.org/1999/xhtml" class="DOMe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mousedown</anchor></code> は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ドラッグ</anchor>したい<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>でだけ listen
しておけばいいのですが、 <code xmlns="http://www.w3.org/1999/xhtml" class="DOMe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mousemove</anchor></code> や
<code xmlns="http://www.w3.org/1999/xhtml" class="DOMe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mouseup</anchor></code> は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ドラッグ</anchor>中に<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">マウス・ポインター</anchor>が<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">箱</anchor>から外れることを考慮して<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ドラッグ・アンド・ドロップ</anchor>可能な領域全体で
listen しておいたほうがいいです。</comment-p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>メモ</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="9" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[9]</anchor-end> 
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ニンテンドーDSiブラウザー</anchor>では <code class="DOMe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mousemove</anchor></code> が<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">発火</anchor>されるだけでかなり処理が重たくなります。中の処理を減らしたりしてもあまり変わらない。
<code class="CSS" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">position</anchor>: <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">absolute</anchor></code> にすると極端に重さが増します。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="10" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[10]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ニンテンドーDSiブラウザー</anchor>は <code class="HTML"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">viewport</anchor></code> を入れて高さ172px以下にすればマウスイベントが発生します。それより長くなるとスクロールになります。 <code class="CSS" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">position</anchor>:<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">absolute</anchor></code> なら175px
までいけます。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="11" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[11]</anchor-end> 3DS では普通にペンでなぞっても mousemove が発生しないので、ありがちな 
<code class="HTMLe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">canvas</anchor></code> を使ったお絵かきは実現不可能です。ペンのタッチイベントは、<ul><li>タッチしてすぐ離せば mouse* 一式と click が順番に発生します。</li><li>1秒くらい同じ場所で長押しして文字列選択モードに入ると mouse* 一式がリアルタイムに発生します。</li></ul></p><p>... の2通りのケースで取得できます。</p><p>後者で従来スタイルのお絵かきが実現できそうに思えますが、何か描くために毎回1秒くらい長押ししないといけないのは意外と辛く、文字や本格的な絵を描く用途には向きません。</p></section></section></body></html>