jQuery click off element event

2019-01-21 07:33发布

站内文章 / JavaScript
11 0 0

问题:

I have a floating div that gets displayed, and I want it to be hidden when the user clicks off the div. This would be similar to the .hover() function callback when hovering off an element. Only I want to do this for click.

I tried just setting a click event for the body, which would hide the div, but that gave unexpected results.

Anyone have ideas on how I could easily do this?

回答1:

Another, possibly simpler, option would be to add a transparent div between the floating DIV and the rest of the page.

A simple click event on the transparent DIV could handle the hiding, and it would avoid the issues you are encountering with the click event.



回答2:

If you want to clear the div when you click somewhere else in the page, you can do something like:

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


回答3:

If you're using Jquery, you could use a selector like:

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


回答4:

Surely you're looking for the blur event?



回答5:

The Best way to do this is:-

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

 var $clicked = $(e.target);

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

});


回答6:

This worked for me,

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


回答7:

example you click a link element to display div menu , you simply bind blur function to link element to hide div menu

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


回答8:

This is a function to handle the click out event, I feed it the selector of the popup, and the jquery element. Probably better served as a jquery plugin, but this is simple enough.

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);
};

So if you have a popup element like <div class='popup'>test</div> you can use my function like clickOut("div.popup", $("div.popup"));



回答9:

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

This can be used to check if the div is visible, if it is visible, it will then slide the object up.



回答10:

Here's a full-fledged event-driven approach

  • Custom events handle the "summoning" and "dismissing" of the layer as to not step on the toes of other click-based events
  • document.body listens to for a dismiss event only when the layer in question is actually visible

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>

It's a lot of code I know, but here just to show a different approach.



回答11:

You can try this. http://benalman.com/projects/jquery-clickoutside-plugin/



回答12:

Using an event handler on the document works well for me:

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;
}


回答13:

I've found the solution in a forum... but I can't find it back to credit the orginal author. Here is the version (modified that lives in my code).

 $(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');
        //...
}

I also have ESC keyup bindings and a 'close' html anchor not pictured above.



回答14:

If you do not want to hide the element that you will show by clicking itself:

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;
});


回答15:

You're going to need to monitor the mouseDown event for the whole page, but you'll have to take note when the user is clicking inside your floating div.

I would suggest adding a hover event to your floated div so when the user is hovering over it, mouseDown is disregarded, but when it is not being hovered over mouseDown would close it



标签： javascript jquery click
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~