HTML5のクリックイベント色々

あむちょです。

HTML5とjavaScriptによるWebアプリケーションを作る際のメモ

前回紹介した花火みたいなやつを、改良しようとして手間かかったので忘れないようにメモ。クリックしたままで自動的に新しのを追加できるようにしました。クリックしたまま移動もできます。

Hanabi

で、とりあえずクリックに関するイベントを所得するために、標準でクリックダウン、クリックアップ、移動があるのだが押しっぱがない（ちゃんと探せばあるかも）。とりあえずそれでやりくりしてみる

<br />
canvas=document.getElementById(&#8216;sel&#8217;);<br />
canvas.addEventListener(&amp;quot;mousemove&amp;quot;, mouseMoveHandler, false);<br />
canvas.addEventListener(&amp;quot;mousedown&amp;quot;, mouseDownHandler, false);<br />
canvas.addEventListener(&amp;quot;mouseup&amp;quot;, mouseUpHandler, false);<br />

まず最初にイベントリスナー登録。これでそれぞれのイベントの際、以下の関数が呼ばれる。

<br />
function mouseDownHandler(e)<br />
function mouseUpHandler(e)<br />
function mouseMoveHandler(e)<br />

でまずは押しっぱを検出するために、フラグを用意。

<br />
function mouseDownHandler(e){</p>
<p>    touchFlag=true;</p>
<p>    var mousex,mousey;<br />
    var rect = e.target.getBoundingClientRect();</p>
<p>    mousex=Math.floor(e.clientX &#8211; rect.left);<br />
    mousey= Math.floor(e.clientY &#8211; rect.top);</p>
<p>    tempX=mousex;<br />
    tempY=mousey;</p>
<p>    makeObj(mousex,mousey);<br />
}</p>
<p>function mouseUpHandler(e){</p>
<p>    touchFlag=false;<br />
}<br />

これでメインルーチンでtouchFlagをチェックすればマウスが押しっぱかわかる。makeObj関数は、新しい花火を生成するための関数です。

<br />
if(touchFlag){<br />
    time++;<br />
    if(time &amp;gt; 3){<br />
        time=0;<br />
        makeObj(tempX,tempY);<br />
    }<br />
}<br />

ただのクリックと分別するために一定の時間を用意して新しい花火を用意してます。次にマウス移動に関するイベントで

<br />
function mouseMoveHandler(e){<br />
    if(!touchFlag)return;</p>
<p>    var rect = e.target.getBoundingClientRect();</p>
<p>    tempX=Math.floor(e.clientX &#8211; rect.left);<br />
    tempY=Math.floor(e.clientY &#8211; rect.top);<br />
}<br />

これでマウスを移動した際、クリックされたままだったら、その座標値が保存され、メインルーチンで新しい花火を生成する時の座標値で使われます。