单击任何位置，但在元素上隐藏它与if语句

以下解决方案

我已经阅读了关于这个概念的大多数问题，但我似乎无法使用if语句。 有帮助吗？

的jsfiddle

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

所以，按钮应该切换div。 切换div（即:visible ）时，只应通过单击页面上的任何位置切换回（不可见）div，但不能单击div本身。

解

我将Diabolic的答案和Kevin Bowersox的答案结合到了这个 答案中 。

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

Answer 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

 Click me 
 

示例： http ： //jsfiddle.net/2udYp/9/

Answer 2

请检查您的代码更新：

 $("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(); }); 

Answer 3

你的代码应该更像这样;

 $("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(); }); 

为什么？

因为您没有在运行时绑定事件。 你是在一个没有立即发生的声明中做的，当它发生时它只是创建一个事件，而不是立即运行它。

我尽量少编辑你的代码。 🙂

附加信息：并使用stopImmediatePropagation（）而不是stopPropagation（）来确保在该行之后不会执行其他事件。

Answer 4

这是你正在寻找的行为吗？

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

修改小提琴

编辑代码：

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

改良小提琴2

编辑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(); }); 

改良小提琴3

Answer 5

对于这个，你真的不需要很多IF语句。 伪代码，您希望单击上的任意位置以隐藏按钮，但单击按钮以执行其他操作。 您可以使用.on('click', function() . . . .click()或.on('click', function() . . .来实现此目的。

请参阅以下代码：

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

……和你的加价：

  Click me 
  

你可以在这个JSFIDDLE上看看这个

我想说一些重要的事情。 如果您正在动态创建元素，请不要使用.live()因为它已被折旧。 使用.on() ，可以在这里的文档中找到 。

---

除此之外，上面的代码完美无瑕。 我想指出这个答案是可扩展的 – 与其他人一起*你可能需要在e.preventDefault()引用的每个元素中放置e.preventDefault()或类似内容。 此代码将来不需要任何更改。