요소 외부에서 클릭이 감지되는 방법은 무엇인가요?

저는 일부 HTML 메뉴를 갖고 있습니다. 이 메뉴의 헤드를 클릭하면 전체적으로 표시됩니다. 사용자가 메뉴 영역 밖을 클릭할 때 이러한 요소를 숨기고 싶습니다.

제이쿼리로 이런 것이 가능한가요?

$(#menuscontainer).clickOutsideThisElement(function() {

// Hide the menus

});

답변 1

참고: #$$ ^ * $ ^ $$ & 를 사용하는 것은 DOM의 정상적인 이벤트 흐름을 방해하기 때문에 피해야합니다. 추가 정보는 #$^ @ *^ ## $ & 를 참조하십시오. 대신 #$!! @ && * $& 를 사용하는 것이 좋습니다.

문서 본문에 클릭 이벤트를 연결하여 창을 닫습니다. 컨테이너에 별도의 클릭 이벤트를 연결하여 문서 본문으로의 전파를 중지합니다.

$(window).click(function() {

//Hide the menus if visible

});

$('#menucontainer').click(function(event){

event.stopPropagation();

});

답변 2

요즘 웹 디자인은 모바일에 최적화되어 있어 클릭이나 터치가 매우 중요하다. 여러분은 어떤 상황에서 클릭이나 터치를 감지하거나, 감지하지 않아야 하는지 알고 계신가요?

이번 글에서는 웹페이지에서 요소 외부를 클릭했을 때 이를 감지하는 방법을 알려드리도록 하겠습니다.

1. 일반적인 방법

HTML 문서의 바깥 부분에 클릭 이벤트를 추가합니다. 이 방법은 대부분의 프로그래밍 언어에서 지원됩니다.

```javascript

document.addEventListener('click', function(e) {

var target = e.target;

// 클릭된 요소가 특정 요소의 하위 요소인지 확인

var isOutside = !element.contains(target);

if (isOutside) {

// 클릭이 요소 바깥에서 발생했음을 확인

}

});

```

2. jQuery 사용

jQuery를 사용하면 이벤트 핸들러를 더 쉽게 추가할 수 있습니다.

```javascript

$(document).on('click', function(e) {

var container = $('selector');

// 클릭된 요소가 container의 하위 요소인지 확인

var isOutside = container.has(e.target).length === 0;

if (isOutside) {

// 클릭이 요소 바깥에서 발생했음을 확인

}

});

```

3. JavaScript를 사용해 배경 클릭시 메뉴 닫기

모바일에서 흔한 패턴 중 하나는 배경 클릭시 메뉴를 닫는 것입니다. 바탕화면에서도 사용할 수 있습니다.

```javascript

const menu = document.querySelector('.nav-menu');

const background = document.querySelector('.background');

document.addEventListener('click', function(event) {

if (!menu.contains(event.target)) {

background.style.display = 'none';

menu.style.display = 'none';

}

});

```

우리는 이제 요소 외부 클릭을 감지하는 세 가지 JavaScript 방법을 살펴보았습니다. 이 방법들은 간단하지만, 웹페이지 사용성을 향상시키는 데 높은 효과를 발휘합니다. 언제든지 사용할 수 있으니, 꼭 기억해두세요!