본문 바로가기

JavaScript/Interactive JavaScript

[JavaScript] 브라우저 기본동작 및 제한

브라우저 기본동작 : 브라우저에는 각 태그별, 상황별로 기본적으로 약속한 동작이 있음.

예 ) 마우스 오른쪽 클릭시 메뉴 창이 뜸

 

const link = document.querySelector('#link');
const checkbox = document.querySelector('#checkbox');
const input = document.querySelector('#input');
const text = document.querySelector('#text');

link.addEventListener('click', function(e) {
	e.preventDefault(); // 브라우저의 기본동작을 제한하는 메소드
	alert('지금은 이동할 수 없습니다.'); 
});

input.addEventListener('keydown', function(e) {
	if (!checkbox.checked) {
		e.preventDefault();
		alert('체크박스를 먼저 체크해 주세요.');
	}
});

document.addEventListener('contextmenu', function(e) {
	e.preventDefault();
	alert('마우스 오른쪽 클릭은 사용할 수 없습니다.');
});

 

e.preventDefault(); 브라우저의 기본동작을 제한하는 메소드