昨日のマウスストーカー、ちょっと修正しました。
どうも！LSSです！！
昨日の記事、
ですが、公開後に「実はAndroidスマホで動作しない」事が判明し、先ほどAndroidでも動作するように修正しました。
公開前に、PCとiPhoneで動作確認はしていたのですが、まさか「iPhoneで動作してAndroidで動作しない」とは^^;
※iPhoneのほうがなにかにつけてウルサイ、と思い込んでいますｗ
何故動作しないか、については心当たりがあったので、修正はさくっとでき、コード・コード解説も修正済です。
ちなみに変更点
コード
<style>
#stalker{
position:absolute;
pointer-events: none;
transition:linear 0.1s;
}
</style>
<div id="stalker">^^) _旦~~</div>
<p>
<script>
stkx=0;stky=0;
pntx=0;pnty=0;
stks=10;//速度調整
document.addEventListener('mousemove',mv,false);
document.addEventListener('touchmove',mvt,false);
timer=setInterval(function(){
stkx=(stkx*stks+pntx)/(stks+1);
stky=(stky*stks+pnty)/(stks+1);
stalker.style.left=stkx+'px';
stalker.style.top=stky+'px';
},100);
function mv(e){
pntx=e.pageX-50;
pnty=e.pageY-20;
}
function mvt(e){
pntx=e.touches[0].pageX-50;
pnty=e.touches[0].pageY-20;
}
</script>
</p>
赤太字・青太字部分を挿入しました。
※分かりにくいですがコード中ほどに一文字だけtを追加した箇所があります。
要するに、「.touches[0]」をサボってました^^;
だいぶ前の記事に
「スマホはマルチタッチの概念があるから云々」と書いていたのを
また忘れていましたｗ
（逆に、これがあってもなくても動作するiPhoneの寛大なところを見つけてしまいましたね。）
PCのマウスイベントにはさすがに「touch？なんじゃそりゃ」となるでしょうから、関数を２つに分けて対処しました。
これで「PC・iPhone・Android」いずれであっても動作する事になります^^
あとがき
「ありきたりなマウスストーカー」に２記事ついやす結果になってしまいました^^;
コードはなるべく簡略化したいものの、やはり「手を抜いてはいけない部分」というのはありますね。
「iPhneはAndroidより（こうしたコードの動作には）うるさい」という思い込みが主要な敗因でした。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
