订阅汇聚素材网Feed

点击空白处隐藏div元素(jquery、javascript)

一、jquery 点击空白处隐藏div元素

头部head代码:

<style type="text/css">
.pop {
display:none;
width: 200px;
height: 130px;
background: #080;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#clickBtn").click(function(){
$(".pop").show();
});
$(document).bind("click",function(e){
var target  = $(e.target);
if(target.closest(".pop,#clickBtn").length == 0){/*.closest()沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象。*/
$(".pop").hide();
};
e.stopPropagation();
})
})
</script>

正文body代码:

<input type="button" id="clickBtn" value="显示">
<div>点击空白处隐藏div元素</div>
点击空白的地方指定div 隐藏消失了

二、javascript 点击空白处隐藏div元素
头部head代码:

<style type="text/css">
#div1{background:#666;position:absolute;overflow:auto;display:none;padding:50px;}
</style>

<script type="text/javascript">
function $(id){
return (document.getElementById(id));
}

function show_div(evt) {
var od = $('div1');
var e = window.event || evt;
var o = e.srcElement || e.target;
with (od.style) {
display = 'block';
left = o.offsetLeft + 'px';
top = o.offsetTop + o.offsetHeight + 1 + 'px';
}
}

function hide_div(evt) {
$('div1').style.display = 'none';
}

function control_bubble(oEvent) {
//取消冒泡
oEvent = oEvent || window.event;
if (document.all) {
oEvent.cancelBubble = true;
} else {
oEvent.stopPropagation();
}
};

function fill_input(oEvent) {
$('text1').value = $('div1').innerHTML;
control_bubble(oEvent);
}

window.onload = function() {
$("text1").onfocus = show_div;

document.onclick = function() {//点击空白文档隐藏
hide_div();
};

$("text1").onclick = control_bubble;
$("div1").onclick = fill_input;
}
</script>

正文body代码:

<input type="text" id="text1" value="点击显示">
<div id="div1" align="center">点击本身不会隐藏,但点击空白处会隐藏</div>
37 人Likes
  

文章转载请注明:点击空白处隐藏div元素(jquery、javascript)-汇聚素材网

本文固定链接:http://www.webhj.com/hj-439.html  +复制链接

点击空白处隐藏div元素(jquery、javascript):等您坐沙发呢!

发表评论

*

*

6 + 4

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍