JavaScript를 사용하여 마우스 포인터를 특정 위치로 이동
JavaScript에서는 마우스 포인터를 특정 위치로 이동할 수 있는 방법이 없습니다. 주된 이유는 사용자에게 보안 문제를 일으키고 사용자 경험을 해칠 수 있기 때문입니다.
이 기사에서는 기본 시스템의 마우스 포인터와 유사하게 보일 수 있는 가짜 또는 사용자 지정 마우스 포인터를 만든 다음 JavaScript를 사용하여 위치를 다른 위치로 이동합니다. 마우스 포인터를 특정 위치로 이동하는 이 기술은 데모용이며 프로덕션 준비 웹 사이트에서는 완전히 피해야 합니다.
일부 CSS 스타일링을 사용하여 기본 HTML 구조 만들기
화면에 두 개의 버튼(화면의 왼쪽과 오른쪽에 하나씩)을 생성하고 목표는 첫 번째 버튼을 클릭할 때 마우스 포인터가 자동으로 두 번째 버튼으로 이동하는 것입니다. 화면.
먼저 HTML 내부에 img 태그와 div 요소라는 두 개의 HTML 요소를 만듭니다. img 태그에는 원래 시스템 마우스 커서 대신 사용할 사용자 정의 또는 가짜 커서의 이미지가 포함됩니다.
인터넷에서 원하는 마우스 커서 이미지를 사용할 수 있습니다. div에는 "버튼 1"과 "버튼 2"라는 두 개의 버튼이 있습니다.
또한 JavaScript 내에서 참조하고 CSS 내에서 스타일을 지정할 수 있도록 이러한 모든 요소에 id를 제공합니다.
코드 스니펫 - HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Move mouse pointer</title>
<style>
* {
cursor: none;
}
.block{
display: flex;
justify-content: space-between;
}
img {
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<img id="cursor" src="./mouse_cursor.png" width="16" height="22" />
<div class="block">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
</div>
</body>
</html>
CSS 내부에서 CSS 범용 선택기로도 알려진 별표(*) 내부의 cursor: none CSS 속성을 사용하여 전체 페이지에서 원래 시스템의 마우스 포인터를 숨깁니다. 그런 다음 div 요소에 가변 상자를 추가하여 요소 사이에 공백이 있을 수 있도록 합니다.
img 태그에서 사용자 지정 커서는 pointer-events: none 속성을 추가하여 포인터 이벤트를 적용할 수 없도록 합니다. MDN에서 pointer-events 에 대해 자세히 알아볼 수 있으며 절대화하여 화면 어디에서나 이동할 수 있습니다.
JavaScript를 사용하여 마우스 포인터를 특정 위치로 이동
이제 JavaScript를 사용하여 기능을 구현해 보겠습니다. 먼저 JavaScript 내부의 getElementById() 메서드를 사용하여 모든 요소 커서 btn1 및 btn2를 가져옵니다.
마우스 커서를 특정 위치(이 경우 버튼 2)로 이동하고 싶기 때문에 먼저 버튼 2의 위치(왼쪽, 위쪽, 너비, 높이)를 잡아야 합니다. 버튼 1, 마우스 포인터가 자동으로 버튼 2로 이동합니다.
이를 위해 btn2에서 getBoundingClientRect() 메서드를 사용하여 왼쪽, 위쪽, 아래쪽, 너비, 높이 등과 같은 다양한 위치와 치수를 포함하는 객체를 제공하고 저장합니다. 이 개체는 rect라는 변수 안에 있습니다. 그런 다음 버튼 2의 finalPositionX 및 finalPositionY를 계산하므로 버튼 1을 클릭할 때 마우스 포인터를 버튼 2의 중앙으로 가져갈 수 있습니다.
사용자 지정 마우스 포인터는 이 위치에서 화면에서 움직이지 않습니다. 브라우저에서 자유롭게 움직이게 하려면 window 객체에 이벤트 리스너를 추가해야 합니다.
이 메서드는 두 개의 매개 변수를 사용합니다. 첫 번째는 함수를 실행하려는 이벤트 유형이고 두 번째는 해당 이벤트가 트리거될 때 실행될 함수 자체입니다.
사용자 정의 마우스 포인터를 움직이고 싶기 때문에 mousemove 이벤트를 첫 번째 매개변수로 사용한 다음 콜백 함수 내에서 clientX 및 clientY 좌표를 가져온 다음 할당할 것입니다. 아래와 같이 사용자 지정 마우스 포인터의 왼쪽 및 상단 위치로 이동합니다.
끝에 "px"를 추가하는 것을 잊지 마십시오. 그렇지 않으면 작동하지 않습니다.
코드 스니펫 - 자바스크립트:
let cursor = document.getElementById('cursor');
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width / 2;
let finalPositionY = rect.top + rect.height / 2;
// Moving our custom mouse pointer
window.addEventListener('mousemove', (e) => {
x = e.clientX;
y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
btn1.addEventListener('mouseup', (e) => {
cursor.style.left = finalPositionX + 'px';
cursor.style.top = finalPositionY + 'px';
})
이 단계에서 사용자 지정 마우스 커서는 일반 마우스 커서로 이동합니다. 이제 사용자 지정 마우스 커서를 특정 위치로 이동합니다.
이를 위해 btn1에 mouseup 이벤트를 추가한 다음 finalPositionX 및 finalPositionY 위치로 마우스 커서 left 및 top 위치를 설정합니다.
출력:
결론
약간의 단점이 있기 때문에 JavaScript를 사용하여 마우스 위치를 변경하는 직접적인 방법은 없습니다. 그러나 프로그래밍에는 항상 다르고 비공식적인 방법이 있습니다.
마우스 포인터를 특정 위치로 이동하는 문제를 해결하려면 원래 마우스 포인터를 숨겨야 합니다. 그런 다음 두 사람이 사용자 지정 마우스 포인터를 만들고 JavaScript 코드를 작성하여 특정 위치로 이동하도록 합니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn