js는 이벤트를 사용하여 버블링을 방지하여 클릭 공백 모달 box_javascript 기술을 숨깁니다.

프런트엔드 작업을 하다 보면 이렇게 작은 기능이 나오는 경우가 있는데 클릭하면 특정 박스가 뜨는데 가끔은 조작하고 싶지 않아서 빈 공간을 클릭해서 숨기고 싶을 때가 있습니다. 상자. 다음 시나리오를 가정하면 작은 버튼을 클릭하면 모달 상자가 팝업될 수 있습니다.

그렇게 간단하지만 빈 부분을 클릭하면 모달 상자를 숨기고 싶고, 버튼 ID: btn, 모달 상자 ID: 모델을 추가합니다.

아마도 가장 간단한 아이디어는 직접 Listen하는 것입니다. 문서의 이벤트에 대한 의사 코드는 다음과 같습니다.

버튼 클릭 팝업 이벤트 모니터링:

코드 복사 코드는 다음과 같습니다.

$("#btn").bind("click",function(e){
if(e.stopPropagation){//필요 버블링 방지
e .stopPropagation();
}else{
e.cancelBubble = true;
}
})

코드 복사 코드는 다음과 같습니다.

$(document).bind("click",function(e){
if (클릭 이벤트가 모델에 없음) {
Hide modal box
}
})

얼핏 보면 문제가 되지 않지만 사실 문제가 많습니다. 먼저 버블을 차단하는 데 주의를 기울여야 합니다. 그렇지 않으면 버튼을 클릭하면 실제로 위의 두 가지 이벤트가 발생합니다. 실제로는 팝업이 표시되지 않고 즉시 숨겨집니다. 모달 상자에는 작은 컨트롤이 많이 있습니다. 때로는 모달 상자의 클릭을 판단하기가 어렵습니다.

여기서 가장 고전적인 방법 중 하나가 있다고 생각합니다. 매우 간단하지만 매우 영리합니다.

먼저 다음과 같이 모달 박스에 대한 이벤트를 수신합니다.

코드 복사 코드는 다음과 같습니다.

$("#modal").bind("click" , function(event) {
if (event && event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble =
}

})

모달에서 클릭 이벤트가 발생하지 않도록 방지하세요.

그런 다음

코드를 복사하세요. 코드는 다음과 같습니다.

$(document).one("click", function(e){
var $target = $(e .currentTarget);
if ( $target.attr("id") != "modal") {
$("#modal").css("display", "none"); }
});

완료되었습니다. 너무 쉽습니다.