$(document).click()使用限制问题
时间：2010-05-11
来源：互联网
我想做一个弹出的层，比如：<body><div class="box">内容</div></body>，.box显示之后在单击body时我想隐藏.box，则使用了$(document).click()
问题就是，.box也属于body里的一部分，所以当单击.box的时候也会隐藏它自己，我想当单击.box不要隐藏，所以有没有办法限制这种现象呢？
谢谢大家！
问题就是，.box也属于body里的一部分，所以当单击.box的时候也会隐藏它自己，我想当单击.box不要隐藏，所以有没有办法限制这种现象呢？
谢谢大家！
作者: zzmama 发布时间: 2010-05-11
我想到一个办法就是用一个变量来控制，只有当这个变量为true的时候$(document).click()才能成功，但是还想知道有没有别的办法
作者: zzmama 发布时间: 2010-05-11
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).bind("click",function(e){
var left = e.pageX;
var top = e.pageY;
var $box = $("#box");
if(!(left >= $box.offset().left && left <= $box.offset().left + $box.width() && top >=$box.offset().top && top <= $box.height())){
$box.hide();
}
})
});
</script>
<script type="text/javascript">
$(function(){
$(document).bind("click",function(e){
var left = e.pageX;
var top = e.pageY;
var $box = $("#box");
if(!(left >= $box.offset().left && left <= $box.offset().left + $box.width() && top >=$box.offset().top && top <= $box.height())){
$box.hide();
}
})
});
</script>
作者: 暮雨輕橒 发布时间: 2010-05-11
这个是我想到的苯方法
获取点击事件时鼠标的位置，并判断该位置是否在box之内 如果不在就hide
获取点击事件时鼠标的位置，并判断该位置是否在box之内 如果不在就hide
作者: 暮雨輕橒 发布时间: 2010-05-11
在单机.box的时候禁止事件冒泡就行了~
作者: jokeykiss 发布时间: 2010-05-11
额 lz说的不是冒泡的问题啊 他说的是单击其他位置的时候不隐藏box
冒泡貌似不能处理这个吧
冒泡貌似不能处理这个吧
作者: 暮雨輕橒 发布时间: 2010-05-11
引用
引用楼主zzmama于2010-05-11 12:54发表的
……
问题就是，.box也属于body里的一部分，所以当单击.box的时候也会隐藏它自己，我想当单击.box不要隐藏，所以有没有办法限制这种现象呢？
……
……
问题就是，.box也属于body里的一部分，所以当单击.box的时候也会隐藏它自己，我想当单击.box不要隐藏，所以有没有办法限制这种现象呢？
……
作者: jokeykiss 发布时间: 2010-05-12
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").click(function(){
$(".box").hide();
return false;
});
});
</script>
把事件绑定在body上，并阻止其冒泡——事件委托
<script type="text/javascript">
$(document).ready(function(){
$("body").click(function(){
$(".box").hide();
return false;
});
});
</script>
把事件绑定在body上，并阻止其冒泡——事件委托
作者: roooma 发布时间: 2010-05-15
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
