wake-up-neo.com

Verwenden Sie jQuery, um einen DIV auszublenden, wenn der Benutzer außerhalb davon klickt

Ich benutze diesen Code:

$('body').click(function() {
   $('.form_wrapper').hide();
});

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

Und dieser HTML:

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

Das Problem ist, dass ich Links in der DIV habe und diese beim Klicken nicht mehr funktionieren.

Hatte das gleiche Problem, kam mit dieser einfachen Lösung. Es funktioniert sogar rekursiv:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
2411
user659025

Du solltest besser so etwas machen:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});
199
Makram Saleh

Dieser Code erkennt alle Klickereignisse auf der Seite und blendet das #CONTAINER -Element nur dann aus, wenn das angeklickte Element weder das #CONTAINER -Element noch eines seiner Nachkommen war.

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});
75
Case

Möglicherweise möchten Sie das Ziel des Click-Ereignisses überprüfen, das für den Body ausgelöst wird, anstatt sich auf stopPropagation zu verlassen.

So etwas wie:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

Außerdem enthält das body-Element möglicherweise nicht den gesamten visuellen Bereich, der im Browser angezeigt wird. Wenn Sie feststellen, dass Ihre Klicks nicht registriert werden, müssen Sie möglicherweise stattdessen den Klick-Handler für das HTML-Element hinzufügen.

72
David Andres

Live DEMO

Überprüfen Sie, ob sich der Klickbereich nicht im Zielelement oder im untergeordneten Element befindet

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

UPDATE:

jQuery Stop Propagation ist die beste Lösung

Live DEMO

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});
31
Salim
$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});
18
meder omuraliev

Die Lösung wurde aktualisiert auf:

  • benutze stattdessen mouseenter und mouseleave
  • von hover benutze live event bindung

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});
16
benvds

Eine Lösung ohne jQuery für die beliebteste Antwort :

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains

12
Martin Vseticka

Live-Demo mit ESC Funktionalität

Funktioniert sowohl auf Desktops als auch auf Mobilgeräten

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

Wenn Sie in einigen Fällen sicherstellen müssen, dass Ihr Element wirklich sichtbar ist, wenn Sie auf das Dokument klicken: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();

8
Roko C. Buljan

Würde so etwas nicht funktionieren?

$("body *").not(".form_wrapper").click(function() {

});

oder

$("body *:not(.form_wrapper)").click(function() {

});
6
MRVDOG

Anstatt jedes einzelne Klicken auf das DOM anzuhören, um ein bestimmtes Element auszublenden, können Sie tabindex auf das übergeordnete <div> setzen und die focusout -Ereignisse abhören.

Durch die Einstellung von tabindex wird sichergestellt, dass das Ereignis blur für <div> ausgelöst wird (normalerweise nicht).

Dein HTML würde also so aussehen:

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

Und dein JS:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});
5
Oscar

Sogar Sleaker:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});
4
Olivenbaum

Aufbauend auf der großartigen Antwort von prc322.

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

Dies fügt ein paar Dinge hinzu ...

  1. Innerhalb einer Funktion mit einem Rückruf mit "unbegrenzten" Argumenten platziert
  2. Es wurde ein Aufruf von .off () von jquery zusammen mit einem Ereignis-Namespace hinzugefügt, um das Ereignis vom Dokument zu lösen, sobald es ausgeführt wurde.
  3. Enthaltenes Touchend für mobile Funktionen

Ich hoffe das hilft jemandem!

4
WiseOlMan

Und für Touch-Geräte wie IPAD und IPHONE können wir folgenden Code verwenden

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});
4
Code Spy

Hier ist eine jsfiddle, die ich in einem anderen Thread gefunden habe und die auch mit dem Esc-Schlüssel funktioniert: http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })
4
djv
var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});
2
Gary

Hängen Sie ein Klickereignis an Elemente der obersten Ebene außerhalb des Formularwrappers an. Beispiel:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

Dies funktioniert auch auf Touch-Geräten. Stellen Sie jedoch sicher, dass Sie kein übergeordnetes Element von .form_wrapper in Ihre Auswahlliste aufnehmen.

2
ThornberryPie
$(document).ready(function() {
        $('.modal-container').on('click', function(e) {
          if(e.target == $(this)[0]) {
                $(this).removeClass('active'); // or hide()
          }
        });
});
.modal-container {
        display: none;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 999;
}

.modal-container.active {
    display: flex;  
}

.modal {
        width: 50%;
        height: auto;
        margin: 20px;
        padding: 20px;
        background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
        <div class="modal">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
        </div>
</div>
2
RustBeard
 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p ist der Elementname. Wobei man auch die ID oder den Klassen- oder Elementnamen übergeben kann.

2
Abhishek

Geben Sie false zurück, wenn Sie auf .form_wrapper klicken:

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});
2
bogo

(Fügen Sie einfach die Antwort von prc322 hinzu.)

In meinem Fall verwende ich diesen Code, um ein Navigationsmenü auszublenden, das angezeigt wird, wenn der Benutzer auf eine entsprechende Registerkarte klickt. Ich fand es nützlich, eine zusätzliche Bedingung hinzuzufügen, dass das Ziel des Klicks außerhalb des Containers nicht ein Link ist.

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

Dies liegt daran, dass einige der Links auf meiner Website der Seite neuen Inhalt hinzufügen. Wenn dieser neue Inhalt zur gleichen Zeit hinzugefügt wird, zu der das Navigationsmenü ausgeblendet wird, kann dies für den Benutzer verwirrend sein.

2
shngrdnr

Kopiert von https://sdtuts.com/click-on-not-specified-element/

Live-Demo http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})
2
user3151197

wenn Sie Probleme mit ios haben, funktioniert mouseup auf Apple Geräten nicht.

funktioniert mousedown/mouseup in jquery für das ipad?

ich benutze das:

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });
2
user2271066

ich habe es so gemacht:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});
1
user2822517
dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});
1
Abed Yaseen
var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

GEIGE

1
SharmaPattar

So viele Antworten, muss ein Durchgangsrecht sein, um eine hinzugefügt zu haben ... Ich habe keine aktuellen (jQuery 3.1.1) Antworten gesehen - also:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});
1
zak

Mit diesem Code können Sie so viele Elemente ausblenden, wie Sie möchten

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})
1
Mahdi Younesi

Laut Dokumentation , .blur() funktioniert nicht nur mit dem Tag <input>. Zum Beispiel:

$('.form_wrapper').blur(function(){
   $(this).hide();
});
0
Bizley

Schaltet zwischen normalen Geräten und Touch-Geräten um

Vor einiger Zeit habe ich hier einige Antworten gelesen und Code erstellt, den ich für Divs verwende, die als Popup-Blasen fungieren.

$('#openPopupBubble').click(function(){
    $('#popupBubble').toggle();

    if($('#popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$('#popupBubble').find('*').is(e.target)){
                $('#popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

Sie können dies auch mithilfe von Klassen abstrakter gestalten und die richtige Popup-Blase basierend auf der Schaltfläche auswählen, die das Klickereignis ausgelöst hat.

$('body').on('click', '.openPopupBubble', function(){
    $(this).next('.popupBubble').toggle();

    if($(this).next('.popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($(this).is(e.target) || $(this).find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$(this).next('.popupBubble').find('*').is(e.target)){
                $(this).next('.popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});
0
Sceptic

Ich habe über ein Suchfeld gearbeitet, das die automatische Vervollständigung anhand der verarbeiteten Keywords anzeigt. Wenn ich nicht auf eine Option klicken möchte, verwende ich den folgenden Code, um die verarbeitete Liste auszublenden, und es funktioniert.

$(document).click(function() {
 $('#suggestion-box').html("");
});

Suggestion-Box ist mein Autocomplete-Container, in dem die Werte angezeigt werden.

0
Vivek
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
0
Bhushan wagh

Sie können ein Klickereignis an das Dokument binden, das das Dropdown-Menü verbirgt, wenn auf etwas außerhalb des Dropdown-Menüs geklickt wird, es jedoch nicht verbirgt, wenn auf etwas innerhalb des Dropdown-Menüs geklickt wird zeigt das Dropdown)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

Wenn Sie es dann ausblenden, lösen Sie das Klick-Ereignis

$(document).unbind('click');
0
jeffsaracco

Diese Lösung sollte funktionieren, es ist ganz einfach:

jQuery(document).ready(function($) {
    jQuery(document).click(function(event) {
        if(typeof  jQuery(event.target).attr("class") != "undefined") {
            var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];
            var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);
            if (arresult < 0) {
                jQuery(".popup").hide();
            }
        }
    });
});

In der obigen Codeveränderung sollten donotcountmeforclickclass1, donotcountmeforclickclass2 usw. mit Klassen, die Sie zum Anzeigen von Popups verwendet haben, oder auf deren Klick-Popups keine Auswirkungen haben, sodass Sie definitiv die Klasse hinzufügen müssen, die Sie zum Öffnen von Popups verwenden.

Ändern Sie die Popup-Klasse mit der Popup-Klasse.

0
Den Pat