Question

jquery 点击元素以外任意地方隐藏该元素的方法

$(".select_box").click(function(){
$(".option").show();
})
$(document).click(function(){
if($(".option").css('display')=='block'){
$(".option").hide();
}
});

这样不行啊,点击select_box时也会触发第二个事件,请大神来指导一下...在线等

Answer 1

第一先实现点击任何地方都隐藏该元素(假设id="bar")

$(document).click(function(){
$("#bar").hide();

});
那么bar也属于document，点击bar也会让自己隐藏，显然这不是想要的，这时候要阻止冒泡事件，即document的事件对bar无效
$("#bar").click(function(event){
event.stopPropagation();

});

Answer 2

$(document)  是包含所有 元素的  所以你点击select_box 也会隐藏

你应该在 $(document) 点击事件的回调函数注 把 select_box  规避掉

$(document).click(function(e){
  if ($(e.target).find('.select_box').length !== 0 ){
  // 如果 你点击的这个元素 里面包含 select_box （也就是查找出来的dom 数量不是0）
  // 就执行你需要隐藏的方法  当你点击的元素是select_box 或者他里面的元素 时候，
  // 里面肯定不会 包含 select_box  也就不会执行 隐藏的方法
    if($(".option").css('display')=='block'){
            $(".option").hide();
        }
  }
    
});

Answer 3

给你写个大概，我测试可行的：

//获取$(".option")绝对位置以及宽度和高度
var top = $(".option").offset().top;
var left = $(".option").offset().left;
var height = $(".option").height();
var width = $(".option").width();
function getX(e) {//点击鼠标，获取鼠标X位置
	 e = e || window.event;
	   
	return e.pageX || e.clientX + document.body.scroolLeft;
	}

	function getY(e) {//点击鼠标，获取鼠标Y位置
	  e = e|| window.event;
	 return e.pageY || e.clientY + document.boyd.scrollTop;
	}
$(document).click(function(e){
    if(getX(e) > left && getX(e) < left + width && getY(e) > top && getY(e) < top + height){
        return;
    } else {
        $(".option").hide();
    }
});

Answer 4

$(".select_box").click(function(){
        $(".option").show();
    })
    // 这样把select_box 给除去
    $(document).not(".select_box").click(function(){
        if($(".option").css('display')=='block'){
            $(".option").hide();
        }
    });

追问

第二个事件 点击没有效果 没有触发

Answer 5

    $(document:not(".select_box")).click(function(){
        if($(".option").css('display')=='block'){
            $(".option").hide();
        }
    });

追问

这个事件我点击了空白处,没有触发,而且document后面用冒号不对呢,要用.

追答

哎~~~，我应该测试一下的。