Click anywhere but on the element to hide it w/ if-statement

问题

SOLUTION BELOW

I've read through most questions around here concerning this concept, but I can't seem to get it to work with an if-statement. Any help?

JSFiddle

$("button").click(function () {
  $("div").fadeToggle("fast");
});

if ($("div").is(":visible")) {
  $(document).click(function () {
    $("div").fadeToggle("fast");
  });

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

So, the button should toggle the div. When the div is toggled (i.e. :visible) the div should only be toggled back (not visible) by clicking anywhere on the page, but not when clicking on the div itself.

Solution

I combined Diabolic's answer and Kevin Bowersox's answer into this one.

$("button").click(function (e) {
    $("div").fadeToggle("fast");
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    if($("div").is(":visible") && !$("div").is(e.target)) {
        $("div").fadeOut("fast");
    }
});

回答1:

Javascript

$("button").click(function (e) {
  $("div").fadeToggle("fast");
});

$(document).mouseup(function(event){
    var target = $("#no-mod");
    if(!target.is(event.target) && !$("button").is(event.target) && target.is(":visible")){
       $("div").fadeToggle("fast");
    }else{
      return false;
    }
});

HTML

<button>Click me</button>
<div id="no-mod"></div>

Example: http://jsfiddle.net/2udYp/9/

回答2:

kindly check this update of your code :

$("button").click(function (e) {
  $("div").fadeToggle("fast");
  e.stopPropagation();
});
$("div").click(function (e) {    
  $("div").fadeIn("fast");
     e.stopPropagation();
});
 $(document).click(function (e) {
    $("div").fadeToggle("fast");
      e.stopPropagation();
 });

回答3:

Your code should be more like this;

$("button").click(function (e) {
    $("div").fadeToggle("fast");
    e.stopImmediatePropagation();
});

$(document).click(function () {
    if($("div").is(":visible")) {
        $("div").fadeToggle("fast");
    }
});

$("div").click(function (e) {
    e.stopImmediatePropagation();
});

Why?

Because you are not binding your events in the runtime. You're doing it within a statement which is not happening instantly and when it happens it is just creating an event, not running it immediately.

I've tried to edit your code as less as I can. :)

Additional Info: And use stopImmediatePropagation() instead of stopPropagation() to be sure no other event is going to be executed after that line.

回答4:

Is this the behaviour you were looking for ???

$(document).click(function (e) {
    $("div").fadeToggle("fast");
      e.stopPropagation();
 });
$("button").click(function (e) {
  $("div").fadeToggle("slow");
  e.stopPropagation();
});
$("div").click(function (e) {    
      e.stopPropagation();
});

Modified Fiddle

Edited Code:

$(document).click(function (e) {
    $("div").fadeToggle("fast");
    e.stopPropagation();

    if($("div").is(':visible')){
        $("div").click(function (e) {    
            e.stopPropagation();
        });
    }
});
$("button").click(function (e) {
    $("div").fadeToggle("slow");
    e.stopPropagation();
});

Modified Fiddle 2

Edit 2:

(document).click(function (e) {
   if($("div").is(':visible')){
         $("div").fadeToggle("fast");
    }
    $("div").click(function (e) {    
       e.stopPropagation();
    });
});
$("button").click(function (e) {
  $("div").fadeToggle("slow");
  e.stopPropagation();
});

Modified Fiddle 3

回答5:

You don't really need a lot of IF statements for this one. Pseudo-code wise, you want clicking anywhere on the <body> to hide the button, but clicking on the button to do something else. You can use .click() or .on('click', function() . . . to achieve this.

See the code below:

$('body').click(function(e) {
    if(e.target.id == "btn"){
        $('#box').show();
    }
    else
    {
        if(e.target.id !== 'box')
        {
            $('#box').hide();
        }
    }
});

... and your markup:

<body>
    <button id='btn'>Click me</button>
    <div id = "box" width="50px" height="50px"></div>
</body>

You can check this out at this JSFIDDLE

I would like to say a few important things. If you're creating the element dynamically, don't use .live() as it's depreciated. Use .on() which can be found in the docs here.

Other than that, the above code works flawlessly. I would like to point out that this answer is scalable - with others you *may need to place e.preventDefault() or similar in every element you reference with a .click() in your code. This code does not require any changes in the future.

来源：https://stackoverflow.com/questions/14622606/click-anywhere-but-on-the-element-to-hide-it-w-if-statement

标签

jquery

if-statement