Comment empêcher la propagation des événements dans le front-end

Cette fois, je vais vous montrer comment empêcher la propagation des événements dans le front-end. Quelles sont les précautions pour empêcher la propagation des événements dans le front-end ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Faire une petite démo, cliquer sur le bouton pour afficher le calque flottant, cliquer ailleurs pour fermer le calque flottant, écrire un simple css

<style>
.wrapper{
    position:relative;
    display:inline-block;
}
.popover{
    position:absolute;
    border:1px solid red;
    left:100%;
    top:0;
    padding:10px;
    margin-left:10px;
    background:white;
    display: none;  /*默认隐藏*/
}
.popover::before{
    position:absolute;
    content:'';
    top:5px;
    right:100%;
    border:10px solid transparent;
    border-right-color:red;
}
.popover::after{
    position:absolute;
    content:'';
    top:5px;
    right:100%;
    border:10px solid transparent;
    border-right-color:white;
    margin-right:-1px;
}

</style>
<p id="wrapper" class=&#39;wrapper&#39;>
    <button id="clickMe">点我</button>
    <p id="popover" class="popover">
        <input type="checkbox">浮层
    </p>
</p>
<script>
    clickMe.addEventListener('click',function(){
        popover.style.display = 'block';
    });
</script>

Et si je clique sur un espace vide sur la page pour la fermer maintenant ? Quelle méthode utiliser ? Il est facile de penser à des documents de surveillance, comme le code suivant

document.addEventListener('click',function(){
    popover.stely.display = 'none';
});

Cependant, après l'avoir écrit ainsi, les boutons sont invalides et il n'y a aucune réponse, peu importe. comment vous cliquez dessus. Pourquoi est-ce ?
Après avoir compris les événements de capture et de bouillonnement mentionnés dans l'article précédent, vous pouvez comprendre cela facilement. Vous pouvez []().
Nous n'avons pas précisé si la surveillance est en phase de capture ou de bouillonnement. Le navigateur passe par défaut en phase de bouillonnement. Lorsque nous cliquons sur le bouton, la phase de capture ne se produit pas, mais la phase de bouillonnement est différente. La fonction est déclenchée en premier, puis la fonction sur button est également déclenchée, provoquant à nouveau le masquage du calque flottant qui est sur le point d'apparaître. documentEnsuite, vous voudrez peut-être demander : l'événement sur
a-t-il été exécuté ? En fait, les deux événements sont exécutés, mais le temps est trop court. Le navigateur les exécute ensemble par défaut. Vous pouvez ajouter un button à l'intérieur pour le voir. debugger

clickMe.addEventListener('click',function(){
    popover.style.display = 'block';
});

Alors comment le résoudre ? Le moyen le plus simple est, en plus d'exécuter

, d'empêcher également la propagation de l'événement popover.style.display = 'block'

clickMe.addEventlistener('click',function(){
    popover.style.display = 'block';
});

popover.addEventListener('click',function(e){
    e.stopPropagation();
});

Pourquoi est-il ajouté sur l'élément parent du bouton ici ? S'il n'est pas ajouté sur l'élément parent, le calque flottant sera fermé lorsque vous cliquerez dessus.

S'il y a beaucoup d'auditeurs sur la page, cette méthode est un gaspillage de mémoire. Une méthode plus économe en mémoire consiste à utiliser JQuery

$(clickMe).on('click',function(){
    $(popover).show();
    $(document).one('click',function(){
        $(popover).hide();
    });
});
$(wrapper).on('click',function(e){
    e.stopPropagation();    
})

Ne pas écouter au début, seulement. dans

Écoutez une fois pendant le « show » et éteignez-le immédiatement. C'est ce qu'on appelle nettoyer le champ de bataille. popover
est tout à fait équivalent au code suivant $(wrapper).on('click',false)

$(wrapper).on('click',function(e){
    e.preventDefault();     //阻止默认事件
    e.stopPropagation();    //阻止传播
})

, mais s'il y a un

dans la page, vous ajoutez une organisation à n'importe quel niveau de son élément parent, y compris checkbox lui-même. Par défaut, ce checkbox ne peut pas être checkbox. check

Il y a une question ici. Si on n’empêche pas l’événement de se propager, que se passera-t-il ainsi ?

$(clickMe).on('click',function(){
    $(popover).show();
    $(document).one('click',funtion(){
        $(popover).hide();
    });
});

Bien sûr, comme avant, rien ne se passera. Alors que s'est-il passé lorsque j'ai cliqué sur le bouton ?

Lorsque je clique sur le bouton, il fera deux choses. D'abord,
`afficherpopovermasquer出来，然后把document函数添加到document`, puis le masquer à nouveau. 上面，当事件传播到

Vous pouvez y ajouter une fonction

pour résoudre ce problème setTimeout()

$(clickMe).on('click',function(){
    $(popover).show();
    setTimeout(function(){
        $(document).one('click',function(){
            $(popover).hide();
        })
    },0)
});

Ce setTimeout(fn,0) n'est pas exécuté immédiatement, mais dès que possible, plus précisément après le le bouillonnement se termine Exécutez la fonction ici, c'est-à-dire que lorsque le bouillonnement se termine, ajoutez l'événement d'écoute à 0 et attendez que l'utilisateur clique la prochaine fois avant de l'exécuter. document

Résumé :

1. surveille

   et button en même temps, rien ne se passe lorsque vous cliquez dessus, car les deux fonctions sont exécutées. C'est résolu. en empêchant la propagation des événements. , ce qui est un gaspillage de mémoire document

2. Une meilleure façon est d'utiliser jQuery Après avoir cliqué sur

   , écoutez button. n'écoute plus et n'empêche pas la propagation de l'événement. Que dois-je faire ? Il n'y a pas de réponse : l'une consiste à empêcher la propagation de l'événement et l'autre est d'ajouter une fonction document. setTimeout()

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'utilisation de React-router v4

Utilisation de la bibliothèque de graphiques légère Chart.js Analyse de cas

Chart.js Explication détaillée des étapes d'utilisation de la bibliothèque légère d'outils de dessin de graphiques HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!