js에서 구현한 div Area_javascript 기술을 숨기려면 div 영역 외부를 클릭하세요.
- WBOY원래의
- 2016-05-16 16:42:531486검색
먼저 JS 이벤트 모델을 살펴보겠습니다. JS 이벤트 모델은 상향 버블링입니다. 예를 들어 특정 DOM 요소에서 onclick 이벤트가 트리거된 후 해당 이벤트는 클릭 이벤트가 발생할 때까지 노드를 따라 위쪽으로 전파됩니다. 특정 상위 노드에 바인딩되어 있지 않으면 문서의 루트로 이동합니다.
버블링 방지: 1. IE가 아닌 브라우저의 경우 stopPropagation(). 2. IE 브라우저의 경우 cancelBubble 속성이 true입니다.
Jquery에는 이미 브라우저 호환 메서드인 event.stopImmediatePropagation()이 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
}
#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
}
</style>
<body>
<input id="btn" type="button" value="显示DIV" />
<div id="myDiv">
This is a div;
</div>
</body>
<script type="text/javascript">
var myDiv = $("#myDiv");
$(function ()
{
$("#btn").click(function (event)
{
showDiv();//调用显示DIV方法
$(document).one("click", function ()
{//对document绑定一个影藏Div方法
$(myDiv).hide();
});
event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event)
{
event.stopPropagation();//阻止事件向上冒泡
});
});
function showDiv()
{
$(myDiv).fadeIn();
}
</script>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.