Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 특정 요소의 마우스 이벤트를 비활성화하는 방법

웹 개발을 하다 보면 특정 요소에 대해 클릭이나 호버 같은 마우스 이벤트를 일시적으로 막아야 하는 경우가 있습니다. 이럴 때 pointer-events 속성을 활용하면 간단하게 해결할 수 있습니다.

pointer-events 속성이란?

pointer-events는 CSS 속성으로, 요소가 마우스 포인터 이벤트(클릭, 더블클릭, 호버 등)에 반응할지 여부를 결정합니다. JavaScript에서는 이 값을 동적으로 변경하여 원하는 시점에 마우스 이벤트를 켜고 끌 수 있습니다.

  • none : 해당 요소가 마우스 이벤트를 받지 않도록 비활성화합니다.
  • auto : 기본값으로, 요소가 정상적으로 마우스 이벤트를 받도록 활성화합니다.

예제 코드

다음은 버튼 두 개를 사용해 특정 div 요소의 마우스 이벤트를 비활성화하고 다시 활성화하는 전체 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .size {
        font-size: 30px;
    }
</style>
</head>
<body>
<h1>JavaScript로 마우스 이벤트 비활성화하기</h1>
<div class="result">div 안에 있는 텍스트입니다</div>
<button class="Btn">비활성화(DISABLE)</button>
<button class="Btn">활성화(ENABLE)</button>
<h3>
위의 버튼을 클릭하여 마우스 이벤트를 켜거나 끌 수 있습니다
</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let BtnEle = document.querySelectorAll(".Btn");
    resEle.addEventListener("click", () => {
        resEle.classList.toggle("size");
    });
    BtnEle[0].addEventListener("click", () => {
        resEle.style.pointerEvents = "none";
    });
    BtnEle[1].addEventListener("click", () => {
        resEle.style.pointerEvents = "auto";
    });
</script>
</body>
</html>

코드 설명

위 코드의 핵심 로직은 다음과 같습니다.

  1. 기본 클릭 이벤트 : 보라색 텍스트가 있는 .result div에는 클릭 이벤트 리스너가 등록되어 있으며, 클릭할 때마다 size 클래스가 토글되어 글자 크기가 커졌다 작아집니다.
  2. 비활성화 버튼 : 첫 번째 버튼을 클릭하면 resEle.style.pointerEvents = "none"이 실행되어 해당 div가 모든 마우스 이벤트를 무시합니다.
  3. 활성화 버튼 : 두 번째 버튼을 클릭하면 pointerEvents 값이 auto로 변경되어 다시 정상적으로 클릭 이벤트를 받습니다.

실행 결과

위 코드를 실행하면 다음과 같이 동작합니다.

보라색 텍스트를 클릭한 경우

텍스트를 클릭하면 글자 크기가 커지거나 작아지는 것을 확인할 수 있습니다.

'비활성화(DISABLE)' 버튼을 클릭한 후 텍스트를 클릭한 경우

pointer-events가 none으로 설정되어 있기 때문에 아무리 클릭해도 텍스트 크기는 변하지 않습니다. 클릭 이벤트 자체가 요소에 전달되지 않습니다.

'활성화(ENABLE)' 버튼을 클릭한 후 텍스트를 클릭한 경우

마우스 이벤트가 다시 활성화되어 클릭 시 글자 크기가 정상적으로 토글됩니다.

마무리

이처럼 pointer-events 속성을 JavaScript와 함께 사용하면 별도의 플래그 변수나 조건문 없이도 특정 요소의 마우스 상호작용을 손쉽게 제어할 수 있습니다. 오버레이 레이어 처리, 로딩 중 입력 차단 등 다양한 UI 시나리오에서 유용하게 활용할 수 있습니다.