일분이 잔상
미해결
인터랙티브 웹 개발 제대로 시작하기
안녕하세요 선생님! 선생님께서 주신 이벤트 위임 보강 영상 소스코드를 아래에서 다운받기도 했었고, https://www.notion.so/4efb427f10a141088de833f6ec20ac1e 다른 질문글에서 답변주신대로 <script src="IlbuniPointer.js"></script> 를 html 에 추가하고 IlbuniPointer.js 파일명으로 아래 내용을 추가했습니다. background: url('./images/ilbuni2.png') ㅠㅠ 요부분을 제 사진경로에 맞게 수정도 했습니다. 그런데 왜 아예 클릭해도 반응이 없는건지 잘모르겠어요..ㅠㅠ 콘솔창이나 element 창 둘다 변화가 없어서 뭐가 잘못된건지 모르겠습니다. class IlbuniPointer { constructor() { let elem = document.createElement('div'); let timerId; elem.style.cssText = ` position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: url('./images/ilbuni2.png') no-repeat 0 0 / cover; transform: scale(0); `; document.body.appendChild(elem); window.addEventListener('click', e => { elem.style.animation = 'pointer-ani 0.5s linear'; elem.style.left = `${e.clientX}px`; elem.style.top = `${e.clientY}px`; timerId = setTimeout(() => { elem.style.animation = 'none'; clearTimeout(timerId); timerId = null; }, 500); }); } } 아래는 js 파일만 실행이 되는지 테스트하기 위해 따로 만들었습니다. <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > </ head > < body > < p >클릭테스트</ p > < script src = "./IlbuniPointer.js" ></ script > </ body > </ html > 파일명 : IlbuniPointer.js (맨앞 대문자i 뒤는 l 이 맞습니다.) 무엇이 잘못되어 작동을 안하는것인지 감을 못잡겠어요..ㅠ 알려주세요 선생님... class IlbuniPointer { constructor () { let elem = document . createElement ( 'div' ) ; let timerId ; elem . style .cssText = ` position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: url('./images/ilbuni_2.png') no-repeat 0 0 / cover; transform: scale(0); ` ; document . body . appendChild (elem) ; window . addEventListener ( 'click' , e => { elem . style .animation = 'pointer-ani 0.5s linear' ; elem . style .left = ` ${ e .clientX } px` ; elem . style .top = ` ${ e .clientY } px` ; timerId = setTimeout ( () => { elem . style .animation = 'none' ; clearTimeout (timerId) ; timerId = null ; } , 500 ) ; } ) ; } }
- 일분이잔상
- 이벤트위임
- HTML/CSS
- javascript
- 인터랙티브-웹