> ### 20210708 TIL
~~_요즘 네 달전에 사둔 드림코딩 자바스크립트 브라우저 인강을 보고 있는데 clientX라는 이벤트가 있는지 처음 알았다!

지금 회사에서 애먹고 있는 트리메뉴 부분에 써먹을 수 있지 않을까...? 헛된 희망인가 ㅎㅎ __~~

MouseEvent.clientX

MouseEvent 인터페이스의 clientX읽기 전용 속성은 이벤트가
발생한 애플리케이션(viewport) 내에 수평 좌표를 제공한다.

예를 들어 뷰포트의 왼쪽 가장자리를 클릭하면 페이지가 수평으로 스크롤되는지 여부에 관계없이 항상 clientX값이 0인 마우스 이벤트가 발생한다는 것임.

예시

var x = instanceOfMouseEvent.clientX

HTML

<p>위치를 보면서 마우스를 이동하십시오</p>
<p id="screen-log"></p>

JavaScript

let screentLog = document.querySelector(#screen-log);
document.addEventListener('mousemove',logkey);

function logKey(e){
screenLog.innerText=`
Screen X/Y: ${e.screenX}, ${e.screenY}
Client X/Y: ${e.clientX}, ${e.clientY}`;
}

출처: MDN
이해했나요? YES!
복붙 안 했나요? YES!