event、dom位置情報

2053 ワード
先端菜鳥 エッセイ
本明細書のすべての属性情報は、chrome環境下にあります.
一、domをテストする



  
  test


 
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:要素は親要素から水平/垂直座標です.

    • retain、strong、copyテスト
    時間帯の判断を書く