div를 제외한 전체 페이지의 OnClick 이벤트

ASP.Net에 대한 자체 콤보 상자 컨트롤을 사용하고 있는데,이 컨트롤은 선택 상자처럼 작동해야하며, 텍스트 상자, 단추 및 div를 선택 상자 바꾸기로 사용하고 있습니다. 그것은 잘 작동하고 이것처럼 보이는 Image :div를 제외한 전체 페이지의 OnClick 이벤트

내 문제는 이제 선택 상자 닫는 동작입니다. 열려있는 선택 상자 바깥 쪽을 클릭하면 닫아야합니다.
그래서 내 div가 열려있을 때만 전체 페이지에 대한 onClick 이벤트가 필요합니다. 어떤 사람이 그 일을하는 방법을 제안합니까?

출처

2009-09-21 Ulli

-1

전체 페이지를 덮고 드롭 다운 아래에있는 투명 div를 넣으십시오. 해당 div의 클릭 이벤트에서 드롭 다운을 클릭하십시오.

출처

2009-09-21 14:08:17 Canavar

click 이벤트 처리기를 document에 추가하십시오. 이벤트 처리기에서 해당 target (또는 IE에서는 srcElement) 속성을 검사하여 열려있는 div 또는 해당 자손이 아닌지 확인합니다.

출처

2009-09-21 15:35:50

document.onclick = function() { 
    if(clickedOutsideElement('divTest')) 
     alert('Outside the element!'); 
    else 
     alert('Inside the element!'); 

} 

function clickedOutsideElement(elemId) { 
    var theElem = getEventTarget(window.event); 

    while(theElem = theElem.offsetParent) { 
     if(theElem.id == elemId) 
      return false; 
    } 

    return true; 
} 

function getEventTarget(evt) { 
    var targ = (evt.target) ? evt.target : evt.srcElement; 

    if(targ && targ.nodeType == 3) 
     targ = targ.parentNode; 

    return targ; 
}

출처

2009-09-21 15:40:29

왜 암시 적 변환 대신'! = null'입니까? – kangax

나는 이것을 8 년 전처럼 썼기 때문에. 어떤 차이가 있다고 생각하지 않지만, 당신을 만족시키기 위해 대답을 업데이트했습니다. –

의사 콤보 상자를 "닫는"문서에서 클릭 이벤트 처리기를 설정하십시오. 또한 의사 - 콤보 상자의 컨테이너 (이 경우 div)에서 이벤트의 버블 링을 취소하는 클릭 이벤트 핸들러를 설정하십시오. 그런 다음 div의 모든 클릭은 멈추기 전에 div까지만 위로 거품이 발생하고 다른 곳에서는 클릭이 문서까지 계속 튕겨 나옵니다.

클릭의 출처를 알아 내기 위해 이벤트의 대상에서 DOM을 순회하는 것보다 훨씬 쉬운 옵션입니다.

EDIT : div 스타일을 숨기려면 display: none; (또는 이와 비슷한)으로 설정하는 경우 문서에 이벤트 처리기를 남겨 두어도 상관 없습니다. 이미 숨겨져있을 때 숨기면 아무 효과가 없습니다. . 매우 깔끔하고 싶다면 div가 표시 될 때 이벤트 리스너를 추가하고 숨겨진 경우 제거하십시오. 아마도 걱정할 필요가 없을 것입니다.

출처

2009-09-21 17:50:49 NickFitz

이것은 가장 쉽고 성능이 뛰어난 IMO 옵션입니다. 질문자 코드가 없으면 대답이 간과 될 수도 있지만 질문자의 JavaScript 전문 지식 수준에 따라 달라집니다. –

이 코드를 작성하는 방법을 모르지만 이것이 가장 좋은 대답 인 것 같습니다. 그것은 조쉬 대답의 문서 이벤트 처리기와 동일합니까? 또 다른 문제 이벤트 핸들러는 내 터지는 컨트롤 패널 내부에 앉아 있고 id에 컨트롤 ID가 들어 있기 때문에 팝업 창 패널의 ID를 알지 못합니다. 제 스크린 샷을 다시 확인하십시오. 내 div가 사라지지 않아야하는 영역은 div 자체뿐만 아니라 버튼과 텍스트 상자입니다. – Ulli

div를 제외한 전체 페이지의 OnClick 이벤트

답변

관련 문제