jQuery klicken off element event

https://stackoverflow.com/questions/1423671

07-07-2019
|

Frage

Ich habe ein schwebendes div, die angezeigt werden, und ich möchte es versteckt werden, wenn der Benutzer die div klickt weg. Dies wäre ähnlich den .hover (Callback-Funktion), wenn ein Element aus schwebt. Nur möchte ich dies für Klick tun.

Ich habe versucht Einstellung nur ein Click-Ereignis für den Körper, die die div verbergen würde, aber das gab unerwartete Ergebnisse.

Wer noch Ideen, wie ich dies leicht tun könnte?

Lösung

Ein weiterer, möglicherweise einfacher, Option wäre ein transparentes div zwischen dem Floating-DIV und dem Rest der Seite hinzuzufügen.

Ein einfaches Klick-Ereignis auf dem transparenten DIV könnte das Versteck handhaben, und es würde die Probleme vermeiden Sie mit dem Click-Ereignisse stoßen.

Andere Tipps

Wenn Sie die div löschen möchten, wenn Sie irgendwo sonst auf der Seite klicken, können Sie so etwas tun:

$('body').click(function(event) {
    if (!$(event.target).closest('#myDiv').length) {
        $('#myDiv').hide();
    };
});

Wenn Sie Jquery verwenden, können Sie einen Selektor wie verwenden:

$("*:not(#myDiv)").live("click", function(){
    $("#myDiv").hide();
});

Sicher sind Sie für die Ereignis verschwimmen?

Der beste Weg, dies zu tun ist: -

    
$(document).bind('click', function(e) {  

 var $clicked = $(e.target);

    if (!$clicked.parents().hasClass("divtohide")) {
        $(".divtohide").hide();
    }

});

Das funktioniert für mich,

var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
      if(mouseOver == false) {
           $("#divToHide").hide();
      }
});

Beispiel Sie einen Link Element klicken div Menü anzuzeigen, geben Sie einfach binden Unschärfefunktion Element zu verknüpfen div Menü auszublenden

$('a#displaymenu').click(function(){
   $("#divName").toggle();
}).blur(function() {$("#divName").hide()})

Dies ist eine Funktion, die klicken out-Ereignis zu behandeln, ich es füttern die Wähler des Pop-up, und das jquery Element. Wahrscheinlich besser als jQuery-Plugin serviert, aber das ist einfach genug.

clickOut = function(selector, element) {
 var hide = function(event) {
  // Hide search options if clicked out
  if (!$(event.originalEvent.target).parents(selector).size())
   $(element).hide();
  else
   $(document).one("click",hide);
 };

 $(document).one("click", hide);
};

Wenn Sie also ein Popup-Element wie <div class='popup'>test</div> haben, können Sie meine Funktion wie clickOut("div.popup", $("div.popup")); verwenden

     $('body').click(function (event) {        
if ($("#divID").is(':visible')) {
            $('#divID').slideUp();
        }
});

Damit kann zu überprüfen, ob die div sichtbar sind, wenn es sichtbar ist, wird es dann das Objekt nach oben verschieben.

Hier ist ein vollwertiges ereignisgesteuerten Ansatz

Benutzerdefinierte Ereignisse behandeln die „Beschwörung“ und „Entlassung“ der Schicht nicht auf die Zehen anderer klicken basierte Ereignisse Schritt zu
document.body hört für ein Ereignis abtun nur, wenn die betreffende Schicht tatsächlich sichtbar ist

Zee Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  var $layer = $('#layer');
  var $body  = $('html');

  $layer
    .bind( 'summon', function( e )
    {
      $layer.show();
      $body.bind( 'click', dismissLayer );
    } )
    .bind( 'dismiss', function( e )
    {
      $layer.hide();
      $body.unbind( 'click', dismissLayer );
    } )
    .click( function( e )
    {
      e.stopPropagation();
    })
    .trigger( 'dismiss' )
  ;

  function dismissLayer( e )
  {
    $layer.trigger( 'dismiss' );
  }

  // This is optional - this just triggers the div to 'visible'
  $('#control').click( function( e )
  {
    var $layer = $('#layer:hidden');
    if ( $layer.length )
    {
      $layer.trigger( 'summon' );
      e.stopPropagation();
    }
  } );
});

</script>

<style type="text/css">
#layer {
  position: absolute;
  left: 100px;
  top: 20px;
  background-color: red;
  padding: 10px;
  color: white;
}
#control {
  cursor: pointer;
}
</style>

</head>
<body>

<div id="layer">test</div>
<span id="control">Show div</span>

</body>
</html>

Es ist eine Menge Code Ich weiß, aber hier nur einen anderen Weg zu zeigen.

Sie können dies versuchen. http://benalman.com/projects/jquery-clickoutside-plugin/

einen Ereignishandler verwenden auf dem Dokument funktioniert gut für mich:

function popUp( element )
{
    element.onmousedown = function (event) { event.stopPropagation(); };
    document.onmousedown = function () { popDown( element ); };

    document.body.appendChild( element );
}

function popDown( element )
{
    document.body.removeChild( element );

    document.onmousedown = null;
}

Ich habe die Lösung in einem Forum gefunden ... aber ich kann es nicht den ursprünglichen Autor zu wiederzuzufinden. Hier ist die Version (modifiziert, dass in meinem Code lebt).

 $(document).bind('mousedown.yourstuff', function(e) {
            var clicked=$(e.target); // get the element clicked                 
            if( clicked.is('#yourstuff')
                 || clicked.parents().is('#yourstuff')) {
                // click safe!
            } else {
                // outside click
                closeIt();
            }
        });

 function closeIt() {
        $(document).unbind('mousedown.emailSignin');
        //...
}

Ich habe auch keyup Bindungen ESC und ein ‚Schließen‘ HTML-Anker nicht oben abgebildet.

Wenn Sie nicht wollen, um das Element zu verstecken, die Sie, indem Sie sich zeigen:

var div_active, the_div;

the_div = $("#the-div");
div_active = false;

$("#show-the-div-button").click(function() {
  if (div_active) {
    the_div.fadeOut(function(){
      div_active = false;
    });
  } else {
    the_div.fadeIn(function(){
      div_active = true;
    });
  }
});

$("body").click(function() {
  if div_active {
    the_div.fadeOut();
    div_active = false;
  }
});

the_div.click(function() {
  return false;
});

Sie gehen zu müssen, das mouseDown Ereignis für die ganze Seite zu überwachen, aber Sie werden nehmen müssen beachten, wenn der Benutzer in Ihrem floating div klickt.

Ich würde vorschlagen, ein Hover-Ereignis zu Ihrem schwebte div Zugabe so, wenn der Benutzer darüber schwebt, mouseDown außer Acht gelassen wird, aber wenn es nicht über mouseDown schwebt werden wird, wäre es schließen

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow