event、dom位置情報

本明細書のすべての属性情報は、chrome環境下にあります.
一、domをテストする

  
  


 
1
 
2
 
3

 

   4
   
5
 
 

   6
   
7
 


  (function () {
    window.onload = function () {
      let doms = document.getElementsByClassName('event');
      for(let dom of doms){
        dom.addEventListener('click', (e) => {
          console.log(e);
        });
      }

    }
  })();

二、属性位置情報
event

clientX/clientY:ブラウザのコンテンツ領域に対するマウスポインタの水平/垂直座標;

layerX/layerY:マウスポインタの現在の要素に対する水平/垂直座標(枠線を含む).

offsetX/offsetY:マウスポインタは現在の要素の水平/垂直座標に対して、枠線を含まない.

pageX/pageY:ブラウザのコンテンツ領域に対するマウスポインタの水平/垂直座標.

screenX/screenY:マウスポインタのデスクトップに対する水平/垂直座標;

dom

clientWidth/clientHeight:要素の幅/高さ、枠線は含まれません.

clientLeft/clinetTop:要素の枠線;

offsetWidth/offsetHeight:要素の幅/高さ、枠線を含む;

offsetLeft/offsetTop:要素は親要素から水平/垂直座標です.