포인터 입력 취소

무엇을 요구하나요?

마우스·손가락으로 누르는 동작으로 실행되는 기능은 잘못 눌렀을 때 취소할 수 있어야 합니다. 일반적으로 다음 중 하나를 만족하면 됩니다.

• 누르는 순간(down)에는 실행하지 않고, 손을 뗄 때(up) 실행한다
• 누른 채로 요소 밖으로 빠져나가면 취소된다
• 실행한 뒤 되돌리기가 가능하다

손 떨림이 있거나 화면을 잘 보지 못하는 사용자는 원하지 않는 곳을 누르는 일이 잦습니다.

자주 틀리는 예

1. 누르는 순간 실행

deleteBtn.addEventListener('mousedown', deleteItem);
deleteBtn.addEventListener('touchstart', deleteItem);

deleteBtn.addEventListener('click', deleteItem); // 손을 뗄 때 실행, 밖으로 빠지면 취소

2. 되돌릴 수 없는 중요한 동작

삭제·결제·전송처럼 되돌리기 어려운 동작은 확인 단계나 되돌리기를 함께 두세요.

<button type="button" onclick="removeFromCart(3)">삭제</button>

<button type="button" onclick="removeFromCart(3)">삭제</button>
<div role="status" class="toast">상품을 삭제했습니다. <button type="button" onclick="undoRemove()">되돌리기</button></div>

예외: 피아노 건반처럼 누르는 순간 반응하는 것이 본질인 기능은 예외로 볼 수 있습니다.

확인하는 방법

1. 버튼을 누른 채로 버튼 밖으로 손가락(마우스)을 옮긴 뒤 떼어 보세요. 실행되지 않아야 합니다.
2. 개발자에게 mousedown, touchstart, pointerdown으로 실행하는 기능이 있는지 확인하세요.
3. 끌어서 놓기는 놓기 전에 원래 자리로 되돌릴 수 있는지 확인하세요.