jQuery Triggerereignis bei Klick außerhalb des Elements

Question

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

}); 

ich herauszufinden versuche, wie es zu machen, so dass, wenn ein Benutzer außerhalb eines bestimmten div (menuWraper) klickt, es ein Ereignis auslöst .. Ich erkennen, kann ich nur Machen Sie bei jedem Klick ein Ereignis und prüfen Sie, ob das angeklickte aktuelle Ziel mit dem aus $ (". menuWraper") ausgewählten Objekt übereinstimmt. Dies funktioniert jedoch nicht, currentTarget ist ein HTML-Objekt (?) Und $ (". MenuWraper") ist ein Object-Objekt? Ich bin sehr verwirrt. hier

Answer 1

Lassen Sie einfach Ihr menuWraper Element event.stopPropagation() anrufen, damit sein Klickereignis nicht auf die document übergeht.

Ausprobieren: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/

Alternativ könnten Sie return false; statt event.stopPropagation();

Answer 2

Die häufigste Anwendung schließt das Dokument auf, klicken aber nicht, wenn es darum ging, aus diesem Element, für das Sie die sprudelnden, wie dies stoppen wollen:

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

Alle hier machten verhindert der Klick von bubbling up (über event.stopPrpagation()), wenn es aus einem .menuWrapper Element stammt. Wenn diese nicht passieren, kam der Klick von woanders und wird standardmäßig bis zu document gehen, wenn es dort ankommt, verstecken wir diese .menuWrapper Elemente.

Answer 3

mit Ich glaube nicht, Dokument das Click-Ereignis ausgelöst wird. Verwenden Sie das body-Element, um das Klickereignis zu erfassen. Möglicherweise müssen Sie auf das überprüfen ...

Answer 4

diese versuchen ..

$(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

wenn Sie Kindelemente wie Dropdown-Menüs haben

$('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

Ich weiß, dass die Frage beantwortet wurde, aber ich hoffe, meine Lösung hilft anderen Menschen.

stopPropagation verursachte Probleme in meinem Fall, weil ich das Ereignis click für etwas anderes brauchte. Außerdem sollte nicht jedes Element bewirken, dass das div beim Klicken geschlossen wird.

Meine Lösung:

$(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

Dieser Code wird das Menü in Frage öffnen, und wird Setup ein Klick-Listener Ereignis. Wenn es ausgelöst wird, durchläuft es die Eltern der Ziel-ID, bis es die Menü-ID findet. Wenn dies nicht der Fall ist, wird das Menü ausgeblendet, da der Benutzer außerhalb des Menüs geklickt hat. Ich habe es getestet und es funktioniert.

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

versuchen dieses

$(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);