요소 외부 클릭 감지 (바닐라 자바 ​​스크립트)

요소 외부 클릭 감지 (바닐라 자바 ​​스크립트)

---

나는 모든 곳에서 좋은 솔루션을 찾았지만 jQuery를 사용 하지 않는 솔루션을 찾을 수 없습니다 .

크로스 브라우저, 정상적인 방법 (이상한 해킹이나 코드를 깨기 쉬운)없이 요소 외부 (자녀가있을 수도 있고 없을 수도 있음) 외부의 클릭을 감지 할 수 있습니까?

---

에 이벤트 리스너를 추가 document하고를 사용 Node.contains()하여 이벤트 대상 (가장 안쪽에서 클릭 한 요소)이 지정된 요소 내부에 있는지 확인합니다. IE5에서도 작동합니다.

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);

  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  if (isClickInside) {
    alert('You clicked inside A')
  } else {
    alert('You clicked outside A')
  }
});

div {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, .2);
  text-align: center;
}

Is the click inside A or outside?
<div id="a">A
  <div id="b">B
    <div id="c">C</div>
  </div>
</div>

---

문서 수준에서 클릭 이벤트를 처리해야합니다. 이벤트 개체에는 target클릭 한 가장 안쪽에있는 DOM 요소 인 속성이 있습니다. 이를 통해 자신을 확인하고 문서 요소 중 하나가 감시 요소 인 경우 해당 부모를 문서 요소까지 걸어갑니다.

jsFiddle 의 예를 참조하십시오.

document.addEventListener("click", function (e) {
  var level = 0;
  for (var element = e.target; element; element = element.parentNode) {
    if (element.id === 'x') {
      document.getElementById("out").innerHTML = (level ? "inner " : "") + "x clicked";
      return;
    }
    level++;
  }
  document.getElementById("out").innerHTML = "not x clicked";
});

항상 그렇듯이 이것은 addEventListener / attachEvent로 인해 브라우저 간 호환이되지 않지만 이와 같이 작동합니다.

event.target이 아닐 때 자식이 클릭되지만 부모 중 하나는 감시 된 요소입니다 (단순히 레벨을 계산합니다). 요소가 있는지 여부에 관계없이 for 절 내부에서 처리기를 반환하지 않도록 부울 var를 사용할 수도 있습니다. 내 예제는 아무것도 일치하지 않을 때 핸들러가 완료되는 것으로 제한합니다.

브라우저 간 호환성을 추가하면 일반적으로 다음과 같이합니다.

var addEvent = function (element, eventName, fn, useCapture) {
  if (element.addEventListener) {
    element.addEventListener(eventName, fn, useCapture);
  }
  else if (element.attachEvent) {
    element.attachEvent(eventName, function (e) {
      fn.apply(element, arguments);
    }, useCapture);
  }
};

이것은 이벤트 리스너 / 핸들러를 연결하기위한 브라우저 간 호환 코드이며, thisIE에서 재 작성 을 포함 하여 jQuery가 이벤트 핸들러에 대해 수행하는 것처럼 요소가됩니다. jQuery를 염두에 두어야 할 인수가 많이 있습니다.)

---

이건 어때:

jsBin 데모

document.onclick = function(event){
  var hasParent = false;
    for(var node = event.target; node != document.body; node = node.parentNode)
    {
      if(node.id == 'div1'){
        hasParent = true;
        break;
      }
    }
  if(hasParent)
    alert('inside');
  else
    alert('outside');
} 

---

To hide element by click outside of it I usually apply such simple code:

var bodyTag = document.getElementsByTagName('body');
var element = document.getElementById('element'); 
function clickedOrNot(e) {
	if (e.target !== element) {
		// action in the case of click outside 
		bodyTag[0].removeEventListener('click', clickedOrNot, true);
	}	
}
bodyTag[0].addEventListener('click', clickedOrNot, true);

참고URL : https://stackoverflow.com/questions/14188654/detect-click-outside-element-vanilla-javascript