search

Js 다른 영역 클릭 - Js daleun yeong-yeog keullig

1 년도s ~ 전에
코멘트: 0
견해: 146

특정 영역을 제외한 부분을 클릭했을 때 이벤트를 발생시켜야 할 때가 있다. 그때는 다음과 같이 하면 된다.

Show
<html>
	<head>
		<meta charset="utf-8">
		<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
	</head>

<body>
	<div class="area" style="width:200px; height:200px; background-color: #4574bb; margin: auto;">
	</div>
</body>
</html>

<script>
$('html').click(function(e) {   
	if(!$(e.target).hasClass("area")) {
		alert('영역 밖입니다.');
	}
});    
</script>
$('html').click(function(e) {   
	if(!$(e.target).hasClass("area")) {
		alert('영역 밖입니다.');
	}
});

즉 특정 영역에 class명을 부여하고 클릭한 곳에 그 클래스명이 없으면 이벤트를 발생시키는 로직입니다.

function initMouseClickEvent(){

$(document).mouseup(function(e){

var sch_container = $("DIV명");

if(sch_container.has(e.target).length ===0)

sch_container.hide();

});

}

cs

mouseup 이벤트를 이용해서, 

생성된 DIV 팝업 창의 외부 영역을 클릭했을 때, 해당 DIV 창의 옵션을 변경함으로써 팝업을 숨긴다.

// event.target = 이벤트 발생 위치 
// event.currentTarget = 이벤트 생성 위치

function clickInEvent(event) { 
    event.currentTarget.querySelector(".in_event").show();
}

function clickOutEvent(event) {
    var target = event.target;
    if(target == event.currentTarget.querySelector(".out_event")){
        target.hide();
    });
}

열정과 게으름 사이

자바스크립트 특정 영역 외 클릭하면 닫기 본문

자동재생 슬라이드가 있어서 이벤트 객체가 중복되서 찾아졌다.

그래서 먼저 제외하는 작업부터 해줬다.

	let gnbSlide = false;// 슬라이딩 메뉴가 열려 있는지 확인
    
	//----------메뉴 슬라이딩 이벤트-----//	
	gnbBtn.addEventListener('click', function(){
		 nav.classList.toggle('slide');
		 return gnbSlide = true; 
	});

  
    	//--- 메뉴 영역외 클릭시 메뉴 닫기---//
	document.addEventListener('click',function(e){
		if(gnbSlide == true){ //슬라이드 메뉴가 열려 있을때
			if(e.target.id != 'loopBtn'){ //e.target이 슬라이딩 이미지 재생 버튼이 아니면
				let tgEl = e.target;
				let header = tgEl.closest('#header');//조상중 #header를 찾음-버튼이 header안에 있을 경우//
			
				if(!header){ //hdader이 조상이 아니면 닫기//
					nav.classList.remove('slide');
					return gnbSlide = false;
				}
			}
		}
	});

event.target 은 이벤트가 일어난 요소를 반환하고.

event.currentTarget 은 이벤트가 바인딩되어 있는 요소를 반환한다.

<div>
	<p> </p>
</div>

$('div').click(function(e){
	console.log(e.target);
    console.log(e.currentTarget);
 });
 
 출력 :e.target: p
 출력 :e.currentTarget: div
 
 $('p').click(function(e){
	console.log(e.target);
    console.log(e.currentTarget);
 });
 
 출력 :e.target: p
 출력 :e.currentTarget: p

안녕하세요 영니입니다😎

레이어팝업을 구현하다보면 가끔 팝업 외에 부분을 클릭했을때 

레이어팝업이 닫히도록 구현 요청이 들어오는데! 

그때 제가 사용하는 코드입니다. 

클릭한 html 내의 target이 특정 class를 가지고 있는지 hasClass로 여부를 체크해 ✔

그 상황에만 이벤트가 일어나도록 하는 코드입니다.

<div>
	<div class="layerPop"></div>
</div>

<script>
	$(html).click(function(e){
    	if(!$(e.target).hasClass('layerPop')){
        	console.log('레이어팝업 외의 영역입니다')
        }
    });
</script>

하다보면 hasClass로는 구현하지 못하는 팝업도 있는데 

그때 또 제가 다르게 사용하는 코드는 아래와 같습니다. 특정 부모의 자식이 맞는지 체크하여 

이벤트를 실행 하는 겁니다! 

$('html').click(function(e){
	if($(e.target).parents('.className').length < 1){
    	console.log('팝업 외 부분이 맞습니다')
        //실행 이벤트 부분
    }
});

간단한 코드지만 유용하게 잘 쓰고 있는 코드라 

공유해봅니다🤟🏻

이 게시물은 JavaScript 및 jQuery에서 사용자가 페이지 외부의 아무 곳이나 클릭하는 경우 div 컨테이너를 숨기는 방법에 대해 설명합니다.

jQuery를 사용하면 클릭한 요소가 컨테이너 자체 또는 div 요소의 자손이 아닌 경우 문서의 클릭 이벤트에 바인딩하고 div 컨테이너를 숨길 수 있습니다. 이것은 jQuery를 사용하여 다음과 같이 구현할 수 있습니다.

jQuery


$(document).click(function(){

    varcontainer=$("#container");

    if (!container.is(event.target)&& !container.has(event.target).length){

        container.hide();

    }

});

HTML


<div id="container">

    <label>Enter your name:</label>

    <input type="text">

    <button id="submit">Submit</button>

</div>


JSFiddle에서 편집

 
또 다른 그럴듯한 방법은 다음을 사용하는 것입니다. .closest() 방법:

jQuery


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

    varcontainer =$("#container");

    if (!$(e.target).closest(container).length){

        container.hide();

    }

});

HTML


<div id="container">

    <label>Enter your name:</label>

    <input type="text">

    <button id="submit">Submit</button>

</div>


JSFiddle에서 편집

2. JavaScript 사용하기

여기에서 아이디어는 페이지에서 클릭 이벤트를 감지하고 클릭의 대상이 div 하위 항목 중 하나가 아닌 경우에만 컨테이너의 표시를 없음으로 설정하는 것입니다.

JS


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

    varcontainer= document.getElementById('container');

    if (!container.contains(e.target)) {

        container.style.display= 'none';

    }

});

HTML


<div id="container">

    <label>Enter your name:</label>

    <input type="text">

    <button id="submit">Submit</button>

</div>


JSFiddle에서 편집

JavaScript 및 jQuery에서 외부를 클릭할 때 div를 숨기는 것이 전부입니다.

읽어 주셔서 감사합니다.

우리의 온라인 컴파일러 C, C++, Java, Python, JavaScript, C#, PHP 및 기타 널리 사용되는 프로그래밍 언어를 사용하여 주석에 코드를 게시합니다.

우리처럼? 우리를 친구에게 소개하고 우리가 성장할 수 있도록 도와주세요. 행복한 코딩 :)


Click event target Div 영역 밖 Body 클릭 이벤트

관련 게시물

자바스크립트 click 이벤트 실행 - jabaseukeulibteu click ibenteu silhaeng
자바스크립트 click 이벤트 실행 - jabaseukeulibteu click ibenteu silhaeng

Javascript onchange 이벤트 - Javascript onchange ibenteu
Javascript onchange 이벤트 - Javascript onchange ibenteu

광고하는

최근 소식

주민등록번호 로 휴대폰 번호 찾기 - jumindeunglogbeonho lo hyudaepon beonho chajgi
1 년도s ~ 전에 . ~에 의해 PragmaticPharaoh
아기는 몇살까지? - agineun myeochsalkkaji?
1 년도s ~ 전에 . ~에 의해 ShavingAccomplice
섬머 포켓 스위치 - seommeo pokes seuwichi
1 년도s ~ 전에 . ~에 의해 TenseOperation
사진 수염 제거 어플 - sajin suyeom jegeo eopeul
1 년도s ~ 전에 . ~에 의해 ChoppedStocks
복면가 왕 인디언 인형 누구야? - bogmyeonga wang indieon inhyeong nuguya?
1 년도s ~ 전에 . ~에 의해 ImpertinentProtein
마법천자문 전투력 순위 - mabeobcheonjamun jeontulyeog sun-wi
1 년도s ~ 전에 . ~에 의해 IntimateCollision
롤20 브금 매크로 - lol20 beugeum maekeulo
1 년도s ~ 전에 . ~에 의해 MisguidedUnderwear
아동학대예방교육 가정통신문 - adonghagdaeyebang-gyoyug gajeongtongsinmun
1 년도s ~ 전에 . ~에 의해 FactionalDrunkenness
Ezpdf 여백 없이 인쇄 - Ezpdf yeobaeg eobs-i inswae
1 년도s ~ 전에 . ~에 의해 InfectiousAffinity
온 세상 창조주 ppt - on sesang changjoju ppt
1 년도s ~ 전에 . ~에 의해 NegligibleSolitude

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의

homeendefrjakoptzhthit
저작권 © 2024 toptenid.com Inc.