[javascript] 터치 이벤트를 사용하여 터치한 위치로 인식하여 메뉴를 열거나 숨기는 방법은?

12 Dec 2023

javascript

먼저 HTML 파일에 다음과 같이 코드를 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>터치 이벤트 예시</title>
    <style>
        #menu {
            display: none;
            position: absolute;
            width: 100px;
            background-color: #f2f2f2;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="menu">
        <!-- 메뉴 내용 -->
        <p>메뉴 항목 1</p>
        <p>메뉴 항목 2</p>
    </div>

    <script>
        document.addEventListener('touchstart', function(e) {
            var menu = document.getElementById('menu');
            if (e.touches[0].clientX < 50 && e.touches[0].clientY < 50) {
                menu.style.display = (menu.style.display == 'none') ? 'block' : 'none';
            }
        });
    </script>
</body>
</html>

위 코드는 터치 이벤트를 감지하고, 특정 위치(예: 왼쪽 상단)를 터치할 때 메뉴를 열거나 숨기는 예시를 보여줍니다. 코드에서는 touchstart 이벤트를 사용하여 터치를 감지하고, e.touches[0].clientX 및 e.touches[0].clientY를 통해 터치한 위치를 확인합니다.

이를 통해 웹 페이지에서 터치 이벤트를 사용하여 터치한 위치에 따라 메뉴를 제어할 수 있습니다.