只点击空白处才隐藏div的方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了只点击空白处才隐藏div的方法相关的知识，希望对你有一定的参考价值。
为了点击一个div层空白处时隐藏这个层，我写了这么个代码
onclick="this.style.display='none'
但是问题出来了，我按不空白的地方也它被隐藏。
比如我点击div层里的某个输入框也被隐藏，点按钮也是。
有什么办法点击不空白处事不隐藏，只点击空白处才隐藏div？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
$("*").click(function (event)
if (!$(this).hasClass("div"))
$(".div").toggle();
event.stopPropagation(); //阻止事件冒泡
);
);
</script>
<style type="text/css">
*
margin:0;
padding:0;
.div
width:200px;
height:200px;
position:absolute;
top:50px;
left:100px;
background:#00BCF3;
display:none;
</style>
</head>
<body>
<input class="btn" type="button" value="点击"/>
<div class="div"></div>
</body>
</html> 参考技术A js代理事件知道不，delegate,可以给父节点div绑定click事件，判断事件触发的目标元素event.target,如果是按钮，输入框之类的，就return,否则就是隐藏。追问
按你的意思是不是这样？
div.onclick=function ()
if( event.target!='textarea'&&event.target!='submit') this.style.display='none';
但还是不敢用。是不是按钮和输入框的target写错了？
我想要的是，按一个按钮的时候出现有输入框和提交按钮的小窗口层。然后按这个窗口外面的时候让它消失。我做的那个代码的记过无论按那个都让div层消失。按输入框也消失。有什么办法？
追答给你一个思路
当鼠标点击按钮时弹出DIV，鼠标放在DIV上时用onmouseover,onmouseout记在一个变量里，如果鼠标在DIV上单击不隐藏DIV，如果不在DIV上单击就隐藏.
如:
var _flag = false; // 全局变量，用于记住鼠标是否在DIV上document.getElementById('div').onmouseover = function ()
_flag = true;
;
document.getElementById('div').onmouseout = function ()
_flag = false;
;
document.body.onclick = function ()
if(_flag)
//不隐藏DIV
else
// 隐藏DIV
;
// 没测试，你试下，这样也会导致一个DOM对象问题。本回答被提问者采纳
求用jquery点击空白处隐藏div的方法，寻找最简单的方法
具体为：点击按钮显示div，当鼠标离开这个div范围，在别的空白处点击，隐藏这个div，方法最好简单易懂，我也是初学jq
把这个div放在一个div中，比如你这个显示出的div叫 id=‘div1’ 然后放在id ='mainDiv'中 mainDiv要充满整个屏幕，设置div1 在maindiv之上，这样点击空白处也就是点击mainDiv隐藏div1 参考技术A 用一个大DIV装你的显示DIV。大DIV全屏，点击大DIV的时候隐藏两个DIV就是了。 参考技术B <!--html--><div class="demo" style="display:none;"></div>
<input type='text' value="点击显示div" class="button"/>
<!--js-->
$(document).ready(function()
$(".button").click(function()
$(".demo").show();
)
$(document).click(function()
$(".demo").click(function()
return;
)
$(".demo").hide()
)
)本回答被提问者和网友采纳 参考技术C 比如div的id叫testdiv 单击显示按钮的id为showdiv
$("#showdiv").click(function() //给按钮注册单击事件，点击显示DIV
$("#testdiv").show(); //显示DIV
$("#testdiv").blur(function() //给DIV绑定失去焦点事件，失去后隐藏
$("#testdiv").hide(); //隐藏DIV
)
) 参考技术D 楼上说的方法可行
再说个方法给你吧
当触发鼠标移出目标div事件后 执行点击body事件隐藏div
以上是关于只点击空白处才隐藏div的方法的主要内容，如果未能解决你的问题，请参考以下文章