[Javascript] 모든 마우스 클릭 이벤트 막는방법

 

클릭 이벤트 전체 block

혹시나 또 사용하거나 다른사람이 찾아볼까봐 정리해봅니다. 이걸 많이 쓰지는 않겠지만 혹시나! 쓰실분은 쓰시기 바랍니다.

 

---

 

모든 클릭 이벤트를 막아줄 이벤트 설정 (mouse click event blocking)

var stopFunc = function(e) { e.preventDefault(); e.stopPropagation(); return false; };
var all = document.querySelectorAll('*');
for (var idx in all) {
	var el = all[idx];
	if (el.addEventListener) {
		el.addEventListener('click', stopFunc, true); // have to true
	}
}

 

모든 엘리먼트에 click이벤트를 추가해줍니다. 여기서 addEventListener 함수의 맨 뒤에 true를 전달하는데 무조건 true를 전달해야합니다. 저 true값으로 인해 click 이벤트가 발생했을 때 현재 추가하는 함수가 제일 먼저 이벤트를 받아올 수 있습니다. 따라서 제일 앞에서 받은 이벤트를 막아버리면 모든 클릭 이벤트가 막히는셈이죠.

※ 하지만 hover하거나 다른 이벤트를 통해서 어떤 DOM(Document Object Model)이 새로 생성된 경우에는 다시 이벤트를 바인딩하거나 하지 않으면 클릭 이벤트가 막히지 않을 것입니다.

 

 

모든 클릭 이벤트를 막는 이벤트 해제(제거)

var all = document.querySelectorAll('*');
for (var idx in all) {
	var el = all[idx];
	if (el.removeEventListener) {
		el.removeEventListener('click', stopFunc, true); // stopFunc이 동일하게 구현되어있다는 가정하에
	}
}

 

막힌 click 이벤트를 다시 활성화하려면 막는 이벤트를 제거해주면 됩니다. 기존에 바인딩되어있는 이벤트들은 그대로 유지하면서 말이죠.

 

---