Ich würde gerne wissen, ob dies die richtige Art ist, sichtbare Elemente auszublenden, wenn Sie irgendwo auf der Seite klicken.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});Das Element (div, span usw.) sollte nicht verschwinden, wenn ein Klickereignis innerhalb der Grenzen des Elements auftritt.
Antworten:
Wenn ich das verstehe, möchten Sie ein Div ausblenden, wenn Sie auf eine andere Stelle als das Div klicken. Wenn Sie über das Div klicken, sollte es NICHT geschlossen werden. Sie können dies mit diesem Code tun:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});Dadurch wird der Klick an die gesamte Seite gebunden. Wenn Sie jedoch auf das betreffende Div klicken, wird das Klickereignis abgebrochen.
.myDivElement haben. Zum Beispiel, wenn Sie ein ausgewähltes Dropdown-Menü haben .myDiv. Wenn Sie auf die Auswahl klicken, denken Sie, dass Sie außerhalb des Rahmens klicken.
Versuche dies
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});Ich verwende den Klassennamen anstelle der ID , da Sie sich in asp.net um die zusätzlichen Dinge kümmern müssen, die .net an die ID anfügt
EDIT- Da Sie ein weiteres Stück hinzugefügt haben, würde es so funktionieren:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});Ab jQuery 1.7 gibt es eine neue Möglichkeit, Ereignisse zu behandeln. Ich dachte, ich würde hier nur antworten, um zu demonstrieren, wie ich dies auf "neue" Weise tun könnte. Wenn nicht, empfehle ich Ihnen, die jQuery-Dokumente für die "on" -Methode zu lesen .
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);Hier missbrauchen wir die Selektoren von jQuery und sprudeln vor Ereignissen. Beachten Sie, dass ich den Ereignishandler anschließend bereinige. Sie können dieses Verhalten mit $('.container').one( siehe: docs ) automatisieren, aber da wir im Handler Bedingungen erfüllen müssen, die hier nicht anwendbar sind.
Das folgende Codebeispiel scheint für mich am besten zu funktionieren. Während Sie 'return false' verwenden können, wird die gesamte Behandlung dieses Ereignisses für das div oder eines seiner untergeordneten Elemente gestoppt. Wenn Sie Steuerelemente für das Popup-Div haben möchten (z. B. ein Popup-Anmeldeformular), müssen Sie event.stopPropogation () verwenden.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>Danke, Thomas. Ich bin neu bei JS und habe verrückt nach einer Lösung für mein Problem gesucht. Ihre hat geholfen.
Ich habe jquery verwendet, um ein Login-Feld zu erstellen, das nach unten rutscht. Für eine optimale Benutzererfahrung habe ich beschlossen, die Box verschwinden zu lassen, wenn der Benutzer auf eine andere Stelle als die Box klickt. Es ist mir ein bisschen peinlich, dass ich ungefähr vier Stunden gebraucht habe, um das zu beheben. Aber hey, ich bin neu bei JS.
Vielleicht kann mein Code jemandem helfen:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>Was Sie auch tun können, ist:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});Wenn Ihr Ziel kein Div ist, verbergen Sie das Div, indem Sie überprüfen, ob seine Länge gleich Null ist.
Ich habe das Folgende getan. Ich dachte daran zu teilen, damit auch jemand anderes davon profitieren könnte.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});Lassen Sie mich wissen, ob ich jemandem dabei helfen kann.
div#newButtonDivnicht darauf geklickt wird. Ich würde empfehlen, dass Sie die zweite .click()in Zeile 4 entfernen (wenn Sie dies tun, denken Sie daran, die schließenden Klammern, Klammern und das Semikolon - Zeile 9 zu entfernen).
Versuche dies:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});Eine andere Möglichkeit, das Container-Div auszublenden, wenn ein Klick in einem nicht untergeordneten Element erfolgt.
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
}); $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});Hier ist #suggest_input in der Name des Textfelds und .suggest_container ist der Name der ul-Klasse und .suggest_div ist das Haupt-Div-Element für meinen automatischen Vorschlag.
Dieser Code dient zum Ausblenden der div-Elemente, indem Sie auf eine beliebige Stelle im Bildschirm klicken. Bevor Sie alles tun, verstehen Sie bitte den Code und kopieren Sie ihn ...
Versuchen Sie dies, es funktioniert perfekt für mich.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});Aber Sie müssen auch diese Dinge berücksichtigen. http://css-tricks.com/dangers-stopping-event-propagation/
Hier ist eine funktionierende CSS / Small JS-Lösung, die auf der Antwort von Sandeep Pal basiert:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});Probieren Sie es aus, indem Sie auf das Kontrollkästchen klicken und dann außerhalb des Menüs:
Dies funktioniert nicht - es verbirgt die .myDIV, wenn Sie darauf klicken.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>Nur 2 kleine Verbesserungen an den obigen Vorschlägen:
Stoppen Sie die Weitergabe des Ereignisses, das dies ausgelöst hat, vorausgesetzt, es handelt sich um einen Klick
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>$( "element" ).focusout(function() {
//your code on element
})$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});Einfache Lösung: Verstecken Sie ein Element in einem Klickereignis außerhalb eines bestimmten Elements.
$(document).on('click', function () {
$('.element').hide();
});
//element will not Hide on click some specific control inside document
$('.control-1').on('click', function (e) {
e.stopPropagation();
});