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>
STYLE.CONTEXTE
VIVO est une marque de quel pays ?
Comment résoudre le crash du Webstorm
Comment résoudre le problème que les CSS ne peuvent pas être chargés
Comment utiliser définir
Comment obtenir la longueur d'un tableau en langage C
Introduction aux caractéristiques de l'espace virtuel
introduction à la commande route add
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
