[책] 자바스크립트 코드 레시피 278 - 115일차

기본 이벤트 작동 해지 설정하기

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

구문

이벤트.preventDefault()

설명

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

실습

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>

---

style.css

.scrollable-element {
  height: 100px;
  overflow-y: scroll;
}

---

script.css

let enableMouseWheel = true;
document.querySelector('#mouseWheelToggle').addEventListener('click', (event) => {
  console.log('체크박스에 값이 들어오면 마우스 휠 기능 무효화');
  enableMouseWheel = event.target.checked === false;
});
document.querySelector('.scrollable-element').addEventListener('wheel', (event) => {
  if (enableMouseWheel === true) {
    console.log('마우스 휠 기능 작동 상태 시 무효 처리 스킵');
    return;
  }
  event.preventDefault();
});