javascript 마우스이벤트 끊김문제 질문드려요

Question

마우스를 따라다니는 요소와 그 요소가 특정위치에 올라갔을 때 변경되고 나갔을 때 돌아오는 스크립트를 짜는 중이에요그런데 분명 정상으로 작동하긴 하는데 문제는 됐다 안됐다 하면서 끊김현상이 너무 심하게 발생한다는거에요..ㅜㅜ크롬, 파이어폭스 둘다 확인해봤는데 똑같은 문제가 발생해요 뭐가 문제일까요? 도와주세요ㅠㅠ window.addEventListener('mousemove',m) function m(e){ d.style.left &#61; e.clientX &#43;'px' d.style.top &#61; e.clientY &#43;'px' }마우스이동 시 아래 함수를 불러서 d(마우스 따라다니는 요소)에 left , top에 값을 줬고요.노드 a에 마우스 올렸을때 d의 모양이 변경되게 하려고 style을 추가했어요.a.addEventListener('mouseenter',function(){ d.classList.add('style') }) a.addEventListener('mouseleave',function(){ d.classList.remove('style') })

songline · Accepted Answer

끊김 현상이라는 것이 스타일이 적용되었다 안되었다 한다는 뜻이죠?직접 확인해보니 그 원인은 mousemove 이벤트로 인해 따라다니는 요소 d 때문이었습니다. 이게 따라다니면서 커서를 가려버리니까 그 아래에 위치한 요소 a는 mouseenter 이벤트를 받지 못하거나 받았더라도 순식간에 mouseleave가 되어버린 것이죠.이를 방지하고 싶다면 d 요소의 스타일에 pointer-events: none을 추가하시면 됩니다. 이러면 클릭 등 마우스 이벤트의 대상으로 인식되지 않습니다. 아래 코드를 참고해주세요. Page Title

This is a Heading

This is a paragraph.

참고: https://blog.outsider.ne.kr/1215

javascript 마우스이벤트 끊김문제 질문드려요

1개의 답변

#clientxy 목록