$('html').click 事件在另一个点击事件之后答案

【问题标题】：$('html').click event after another click event$('html').click 事件在另一个点击事件之后
【发布时间】：2013-07-30 17:04:14
【问题描述】：

意图：

单击 (#clickme) 时，DIV 会向下滑动并进入视图，并且 (var isclicked = true)
当 (var isclicked = true) 并单击 (#clickme) 时，DIV 向上滑动并且 (var isclicked = false)
当 (var isclicked = true) 并且 DIV 在视图中时，单击 $('html') 会向上滑动 DIV 并且 (var isclicked = false)

问题：当 DIV 处于 slideDown 位置时，(var isclicked = true)，单击 $('html') 时会继续触发。我错过了什么，所以在点击 $('html') 时只会触发 WHILE DIV is (var isclicked = true)

var isclicked = false; 
$('#clickme').click(function(event){
  doslider();       
  console.log(isclicked);    
  if(isclicked == true){
     $('html').click(function(event){
         console.log('is box opened? '+isclicked);
     });        
  } 
});


function doslider(){     
 if(isclicked == false){    
     $('#myslider').slideDown('slow');         
       isclicked = true;                
 }else{
     $('#myslider').slideUp('slow');
       isclicked = false;          
 }   
 return isclicked; }

JSFiddle：http://jsfiddle.net/7Zfwx/92/

【问题讨论】：

“仅在 DIV 为 (var isclicked = true) 时触发”是什么意思？
看我的回答你想要这个吗？

标签： javascript jquery html

【解决方案1】：

抛弃全局 isClicked 变量，只使用 slideToggle：

$("#clickme").click(function(e) {
    e.stopPropagation();
    $("#myslider").slideToggle("slow");
});

$("body").click(function() {
    $("#myslider").is(":visible") ? $("#myslider").slideUp("slow") : 0
});

演示：http://jsfiddle.net/7Zfwx/103/

【讨论】：

这行得通。 e.stopPropagation();并且 $("#myslider").is(":visible") 可以解决问题。谢谢

【解决方案2】：

记得先停止（并完成）上一个动画：

if(isclicked == false){    
    $('#myslider').stop(true, true).slideDown('slow');
      isclicked = true;       
}else{
    $('#myslider').stop(true, true).slideUp('slow');
      isclicked = false;   
}

演示：http://jsfiddle.net/maniator/7Zfwx/94/

【讨论】：

【解决方案3】：

使用$('body') 而不是$('html')

see this JSFiddle

【讨论】：