zdarzenie wyzwalające jQuery gdy kliknięcie poza elementem

Question

$(document).click(function(evt) { 
    var target = evt.currentTarget; 
    var inside = $(".menuWraper"); 
    if (target != inside) { 
     alert("bleep"); 
    } 

}); 

próbuję dowiedzieć się, jak zrobić to tak, że jeśli użytkownik kliknie poza pewnym div (menuWraper), wywołuje zdarzenie .. zdałem sobie sprawę, mogę tylko Każdemu kliknięciu wywołaj zdarzenie, a następnie sprawdź, czy kliknięty bieżący Cel jest taki sam jak obiekt wybrany z $ (". menuWraper"). Jednak to nie działa, currentTarget to obiekt HTML (?) I $ (". MenuWraper") to obiekt Object? Jestem zdezorientowany.

Answer 1

Wystarczy mieć swój menuWraper elementu połączenia event.stopPropagation() tak, że jego kliknięcie zdarzenie nie bubble do document.

Wypróbuj:http://jsfiddle.net/Py7Mu/

$(document).click(function() { 
    alert('clicked outside'); 
}); 

$(".menuWraper").click(function(event) { 
    alert('clicked inside'); 
    event.stopPropagation(); 
}); 

• http://api.jquery.com/event.stopPropagation/

Alternatywnie, można return false; zamiast korzystania event.stopPropagation();

Answer 2

Najczęstsze zastosowanie tutaj zamyka na kliknięcie dokumentu, ale nie wtedy, gdy pochodzi z wewnątrz tego elementu, za to chcesz zatrzymać pęcherzyków, jak to:

$(".menuWrapper").click(function(e) { 
    e.stopPropagation(); //stops click event from reaching document 
}); 
$(document).click(function() { 
    $(".menuWrapper").hide(); //click came from somewhere else 
}); 

wszyscy byli tu robi jest zapobieganie kliknięcie z bubbling up (via event.stopPrpagation()), gdy pochodzi z elementu .menuWrapper. Jeśli ta nie stanie się, kliknięcie pochodzi z innego miejsca i domyślnie zmierza do document, jeśli się tam znajdzie, ukrywamy te elementy .menuWrapper.

Answer 3

Nie sądzę dokument pożary zdarzenie click. Spróbuj użyć elementu body, aby uchwycić zdarzenie click. Może trzeba sprawdzić, że ...

Answer 4

próbować te ..

$(document).click(function(evt) { 
    var target = evt.target.className; 
    var inside = $(".menuWraper"); 
    //alert($(target).html()); 
    if ($.trim(target) != '') { 
     if ($("." + target) != inside) { 
      alert("bleep"); 
     } 
    } 
}); 

Answer 5

jeśli elementy potomne jak menu rozwijanych

$('html').click(function(e) { 
    //if clicked element is not your element and parents aren't your div 
    if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) { 
    //do stuff 
    } 
}); 

Answer 6

Wiem, że pytanie zostało odebrane, ale Mam nadzieję, że moje rozwiązanie pomaga innym ludziom.

stopPropagation spowodował problemy w moim przypadku, ponieważ potrzebowałem zdarzenia click dla czegoś innego. Co więcej, nie każdy element powinien powodować zamknięcie elementu div po kliknięciu.

Moje rozwiązanie:

$(document).click(function(e) { 
    if (($(e.target).closest("#mydiv").attr("id") != "mydiv") && 
     $(e.target).closest("#div-exception").attr("id") != "div-exception") { 
     alert("Clicked outside!"); 
    } 
}); 

http://jsfiddle.net/NLDu3/

Answer 7

Kod ten będzie otworzyć menu w pytaniu i ustawi zdarzenie click słuchaczem. Po uruchomieniu przełączy się przez rodziców obiektu docelowego, dopóki nie znajdzie identyfikatora menu. Jeśli nie, ukryje menu, ponieważ użytkownik kliknął poza menu. Przetestowałem to i działa.

function tog_alerts(){ 
    if($('#Element').css('display') == 'none'){ 
     $('#Element').show(); 
     setTimeout(function() { 
      document.body.addEventListener('click', Close_Alerts, false); 
     }, 500); 
    } 
} 

function Close_Alerts(e){ 
    var current = e.target; 
    var check = 0; 
    while (current.parentNode){ 
     current = current.parentNode 
     if(current.id == 'Element'){ 
     check = 1; 
     } 
    } 
    if(check == 0){ 
     document.body.removeEventListener('click', Close_Alerts, false); 
     $('#Element').hide();   
    } 
} 

Answer 8

próbować ten jeden

$(document).click(function(event) { 

     if(event.target.id === 'xxx') 
      return false; 
     else { 
       // do some this here 
     } 

    }); 

Answer 9

$(document).click((e) => { 
    if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) { 
    } else { 
    this.onClose(); 
    } 
}); 

Answer 10

function handler(event) { 
var target = $(event.target); 
if (!target.is("div.menuWraper")) { 
    alert("outside"); 
} 
} 
$("#myPage").click(handler);