您的位置：首页 > Web前端 > JavaScript

js 禁止冒泡点击页面空白处,隐藏特定的div

2015-01-29 13:50 489 查看

<!doctype html>
<html>
<head>
<title>demo</title>
<style type="text/css">
.main { position:relative}
#btn { border:none;cursor:pointer;background:#ccc }
.layer { position:absolute;height:30px;width:50px;background:#4cff00;display:none }
</style>
<script>
window.onload = function () {
function stopPropagation(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = false;
}
}
var btn = document.getElementById("btn");
var layer = document.getElementById("layer");
btn.onclick = function (e) {

layer.style.display = "block";
layer.style.left = "10px";
layer.style.top = "50px";
stopPropagation(e);

}
window.onclick = function (e) {
layer.style.display = "none";
}
}
</script>
</head>
<body>
<div class="main">
<input  id="btn" type="button" value="点击"/>
<div class="layer" id="layer">

</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js html 冒泡

相关文章推荐

新的分享

章节导航

js 禁止冒泡 点击页面空白处,隐藏特定的div

js 禁止冒泡点击页面空白处,隐藏特定的div