728x90 300x250 SMALL javaScript545 대상을 기준으로 클릭한 위치 값 구하기 offsetX, offsetY offsetX, offsetY 클릭한 대상을 기준으로 마우스 위치를 구한다. 마우스를 클릭한 위치로 이동하기 (마우스 클릭한 위치 기준 대상의 좌측 상단이 시작 지점) See the Pen offset by kim oya (@ttuttu) on CodePen. 이미지 출처 : https://stephendoddtech.com/blog/game-design/mouse-event-listener-input-html-canvas 2023. 4. 28. 마우스 클릭 위치 구하기 clientX, clientY, pageX, pageY 1. 윈도우 기준으로 클릭한 전역 위치 구하기 mouseEvent.clientX mouseEvent.clientY 윈도우 내부 영역 기준으로 한 마우스 커서의 X, Y 좌표값 (윈도우 창 크기만큼 / 스크롤은 반영되지 않음) 2. 문서를 기준으로 클릭한 전역 위치 구하기 mouseEvent.pageX mouseEvent.pageY 실제 문서 영역 기준의 마우스 커서 좌표 문서의 스크롤 값이 적용된 값 #panel에서 버튼 클릭한 위치값 알아내기 $("#panel").click(function(e){ var clickInfo = `clientX:${e.clientX}, clientY:${e.clientY}, pageX:${e.pageX}, pageY:${e.pageY}`; console.log(clickI.. 2023. 4. 27. top 버튼 클릭하면 스크롤 top으로 이동 scrollTo top으로 이동 2023. 4. 26. 스크롤 될 때 이벤트 처리하기 scroll 스크롤 될 때 마다 이벤트 발생 $(window).on("scroll", function(){}); 스크롤 할때마다 스크롤 정보를 #info 영역에 출력 $(window).on("scroll",function(){ var scrInfo = ""; scrInfo += `window.scrollX : ${window.scrollX} `; scrInfo += `window.scrollY : ${window.scrollY} `; $("#info").html(scrInfo); }) 2023. 4. 25. 이전 1 ··· 35 36 37 38 39 40 41 ··· 137 다음 728x90 반응형 LIST