Cliquer en dehors de la zone div pour masquer les compétences div area_javascript implémentées par js-js tutoriel-php.cn

Cliquer en dehors de la zone div pour masquer les compétences div area_javascript implémentées par js

WBOY

Libérer： 2016-05-16 16:42:53

original

1532 Les gens l'ont consulté

Tout d'abord, jetons un coup d'œil au modèle d'événement JS. Le modèle d'événement JS bouillonne vers le haut. Par exemple, après qu'un événement onclick soit déclenché sur un certain élément DOM, l'événement se propagera vers le haut en suivant le nœud jusqu'à un événement click. est lié à un certain nœud parent, sinon il remontera à la racine du document.

Empêcher le bouillonnement : 1. stopPropagation() pour les navigateurs non IE. 2. L'attribut CancelBubble est vrai, pour le navigateur IE,

Jquery dispose déjà d'une méthode compatible avec le navigateur, 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>

Copier après la connexion