인프런 커뮤니티 질문&답변

loelee91님의 프로필 이미지
loelee91

작성한 질문수

반응형 웹사이트 포트폴리오(Architecture Agency)

선생님 콘솔창 에러 관련해서 도와주세요 ㅠㅠ

작성

·

14K

2

선선생님 콘솔창에 계속 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL> 이 에러가 뜨는데 혹시 이유가 뭔지 아실까요? ㅜㅜ

제가 강의 들으면서 따라한 코딩이 잘못되었나 해서  선생님이 올려주신 파일 (html /css /js / 플러그인 )그대로 갖다 붙여서 검사해봐도 계속 저런식으로 뜨는데 어떻게 해야 할까요?

답변 4

2

저는 해결을 한 것 같아서 일단 공유해봅니다

구글링해보니 passive에 false를 넣어야 해결이 되는데

이게 제이쿼리로 되어 있다보니 그게 안먹힙니다.

순수 자바스크립트로 바꿔줘야 합니다. 아래 그 내용입니다.

main.js 파일 수정

123? 124? 번째 라인 수정(scrollHijacking 함수)

OriginalEvent 삭제

if (event.detail < 0 || event.wheelDelta > 0) {

36번째 라인을 두 개로 분리(bindEvents 함수)

window.addEventListener('mousewheel'scrollHijacking, {passive: false});
window.addEventListener('DOMMouseScroll'scrollHijacking, {passive: false});

덕분에 해결했습니다. 정말 감사합니다!

1

플러그인 자체의 문제니까 loelee91 님께서 잘못하신건 아니에요.
거슬리기는 하지만 기능에 문제 없으니까 앞으로 수업 쭉 진행해주세요~
화이팅~^^

1

loelee91님의 프로필 이미지
loelee91
질문자

아 그렇군요 해결은 안해주셔도 돼요! 휠 내리고 올릴때마다  콘솔창에서 계속 에러가 생겨나서 혹시 제가 잘못 코딩한걸까봐 그걸 여쭤본거랍니다. ㅎㅎㅎㅎ 플러그인 자체의 문제라고 하니 신경 안쓰고 있을게요 쌤! 답변주셔서 감사합니다!!

1

안녕하세요. 코딩웍스입니다.

콘솔오류와 관계없이 작동에는 문제 없으실거에요.
그래도 콘솔오류가 신경쓰이시니까 저도 자세히 다시 확인해봤습니다.

콘솔오류는 2가지 종류입니다.

첫번째는 slick.js 의 폰트와 loader 이미지 입니다.

slick.js에 포함된 fonts 폴더와 ajax-loader.gif 관련된 콘솔오류입니다.
제작에 필요한 부분이 아니라서 뺐는데 이부분의 콘솔오류를 없애시려면 그림에 있는 것 처럼 slick.js 공식 홈페이지에서 slick-1.8.1.zip 을 다운로드 받으셔서 그림에 있는 것처럼 fonts 폴더와 ajax-loader.gif  를 드래그해서 놓으시면 첫번째 slick.js 관련 콘솔오류는 없어집니다.
slick.js 공식홈페이지 들어가셔서 스크롤을 가장 하단 부분까지 하시면 Download Now 라는 버튼을 누르시면 slick-1.8.1.zip 을 다운받으실 수 있습니다.

slick.js 공식홈페이지 : https://kenwheeler.github.io/slick/

두번째는 PC버전에서 마우스 휠을 내릴 때 생기는 콘솔오류입니다.

그림의 파란색 박스에 보이는 콘솔오류 때문에 혹시나 해서 섹션 전환 플러그인 공식홈페이지에서 확인했는데 공식사이트의 데모 페이지에서도 동일한 콘솔오류가 납니다. 마우스 휠을 내리고 올릴 때 생기는 콘솔오류인것으로 보입니다.
죄송하지만 이부분은 당장 해결은 어렵습니다. 지인 개발자에게 개인적으로 문의해서 해결해야 할 것 같습니다.
이 콘솔오류를 잡을 수 있을지에 대한 부분은 미지수입니다만 노력 해보겠습니다.

작동에는 전혀 문제 없지만 콘솔오류가 나는 부분이 신경쓰이시는것 매우 정상입니다.
이건 플러그인 자체의 콘솔오류이니 신경 쓰이셔도 조금 양해해주시기를 부탁드립니다.

loelee91님의 프로필 이미지
loelee91

작성한 질문수

질문하기