忘備録/JavaScript

Oncliick等のイベント時の要素

• html内の場合 this にその要素が入っている

<input type="range" ならthis.valueに値が入っている

• addEventListenerで登録時は第一引数をeとすれば e.targetに入ってる(thisにも入ってる)

canvasのサイズを自動調整

• 要素の親要素をparentNodeでclientWidthが得られるまで辿って設定する

var cvs = document.getElementById(canvasID);
if(!cvs) throw (canvasID+"?");
{let p=cvs;do{p=p.parentNode;}while(!p.clientWidth); cvs.width=p.clientWidth-12;}

canvas(cvs)上のマウス　タッチパネル

• マウス

cvs.addEventListener('mousemove', function(e){// (e) =>{
let x=e.offsetX;//x座標
let y=e.offsetY;//y座標
};

• タッチパネルにはoffsetXが無いので

 cvs.addEventListener('touchmove', function(e){// (e) =>{
 e.preventDefault();//おまじない
 let r= e.target.getBoundingClientRect();
if(e.touches.length=1){
  let x=e.touches[0].pageX-r.left - window.pageXOffset;
  let y=e.touches[0].pageY-r.top - window.pageYOffset;
  };

HTML側で要素に勝手に追加した属性へのアクセス

• 要素e に対してe.getAttribute(属性名)はnameとかidとか定義されているものだけ有効でその場合は

let d= e.属性名; でもアクセス出来る

• 勝手に追加した属性を hoge とすると <要素 hoge="hage"> から"hage"を得るには

let d = e.attributes.hoge.value;