Maison > Article > interface Web > Cliquer en dehors de la zone div pour masquer les compétences div area_javascript implémentées par js

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

WBOYoriginal: 2016-05-16 16:42:531486parcourir

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>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：L'événement de défilement de poulie de liaison JS natif est compatible avec les compétences courantes de browsers_javascriptArticle suivant：L'événement de défilement de poulie de liaison JS natif est compatible avec les compétences courantes de browsers_javascript

Articles Liés

Voir plus