[JacaScript] 자바스크립트 기본 이벤트 작동 해지 설정하기

126_자바스크립트 기본 이벤트 작동해지 설정하기

[적용]

• 마우스 휠의 기능을 무효화하고 싶을 때
• 터치 기능을 무효화 하고 싶을 때

---

[문법]

메소드	의미	반환
이벤트.preventDefault()	기본 이벤트 작동 해지	없음

---

[내용]

PreventDefault() 를 사용해 기본 이벤트의 작동을 해지할 수 있다.

// 마우스 휠 기능 무효화하기
document.querySelector('.foo').addEventListener('wheel', (event) => {
  event.preventDefault();
});

// 터치 기능 무효화하기
document.documentElement.addEventListener('touchstart', (event) => {
  event.preventDefault();
});

---

[예시]

체크박스를 체크하면 마우스 휠의 기능을 무효화하는 샘플을 확인해 보자

 

HTML                                                                                                                                                              index.html

<p><input id="mouseWheelToggle" type="checkbox">마우스 휠 기능 무효화</p>

<ul class="scrollable-element">
  <li>사과</li>
  <li>귤</li>
  <li>바나나</li>
  <li>딸기</li>
  <li>파인애플</li>
  <li>키위</li>
  <li>포도</li>
  <li>수박</li>
</ul>

CSS                                                                                                                                                                     style.css

.scrollable-element {
  overflow-y: scroll;
}

JavaScript                                                                                                                                                          main.js

/** 마우스 휠 무효화 전환 변수 */
let enableMouseWheel = true;

// 체크박스 클릭 시 처리 작업
document
  .querySelector('#mouseWheelToggle')
  .addEventListener('click', (event) => {
    // 체크박스에 값이 들어오면 마우스 휠 기능 무효화
    enableMouseWheel = event.target.checked === false;
  });
  
// 스크롤 요소에서 스크롤 시 처리 작업
document
  .querySelector('.sctollerble-element')
  .addEventListener('wheel', (event) => {
    // 마우스 휠 기능 작동 상태 시 모효 처리 스킵
    if (enableMouseWheel === true) {
      return;
    }
    
  // 마우스 휠 무효화 시 event.preventDefault() 실행
  event.preventDefault();
  });

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김