发表新帖
发表新帖

jQuery click off element event

后端 未结
关注
15 992
無奈伤痛
無奈伤痛 2020-12-13 00:25

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 hoverin

相关标签:
15条回答
  • 隐瞒了意图╮
    2020-12-13 00:28

    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

    0 讨论(0)
  • 终归单人心
    2020-12-13 00:29

    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.

    0 讨论(0)
  • 刺人心
    2020-12-13 00:30

    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.

    0 讨论(0)
  • 南旧
    2020-12-13 00:34

    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();
      }
});
    0 讨论(0)
  • 闹比i
    2020-12-13 00:35

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

    0 讨论(0)
  • 心在旅途
    2020-12-13 00:36

    The Best way to do this is:-

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

 var $clicked = $(e.target);

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

});
    0 讨论(0)
 看不清?
提交回复
热议问题