Maison > Article > interface Web > Lorsque la souris jquery quitte la souris, une transaction sera traitée. Comment exclure la souris d'être affectée lorsqu'elle se trouve dans des éléments enfants ?

Lorsque la souris jquery quitte la souris, une transaction sera traitée. Comment exclure la souris d'être affectée lorsqu'elle se trouve dans des éléments enfants ?

黄舟original: 2017-06-28 11:25:441346parcourir

Lorsque la souris jquery quitte (mouseout), une transaction sera traitée, mais comment exclure la souris lorsqu'elle est sur l'élément enfant sans affecter le

<div class="a"><div class="a1" style="display:none;"></div></div>
jquery中有mouseout离开时
$(".a").hover(function(){
$(this).find(".a1").css("display","block");
});	
$(".a").mouseout(function(){
$(this).find(".a1").css("display","none");	
});

ci-dessus. son élément enfant, cela équivaut à quitter le DIV actuel, comment l'éviter ?

Vous pouvez utiliser la méthode jQuery event - mouseleave() pour obtenir cet effet.

Définition et utilisation

Lorsque le pointeur de la souris quitte un élément, l'événement mouseleave se produit.

Cet événement est le plus souvent utilisé avec l'événement mouseenter.

La méthode mouseleave() déclenche l'événement mouseleave ou spécifie une fonction à exécuter lorsque l'événement mouseleave se produit.

Remarque : Contrairement à l'événement mouseout, l'événement mouseleave ne sera déclenché que lorsque le pointeur de la souris quittera l'élément sélectionné. Si le pointeur de la souris quitte un élément enfant, l'événement mouseout sera également déclenché. Voir l'exemple ci-dessous pour une démonstration.

Grammaire

$(selector).mouseleave()

Exemple

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    x=0;
    y=0;
    $(document).ready(function(){
          $("div.out").mouseout(function(){
                $(".out span").text(x+=1);
          });
          $("div.leave").mouseleave(function(){
                $(".leave span").text(y+=1);
          });
    });
</script>
</head>
<body>
    <p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
    <div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
    </div>
    <div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
        <h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
    </div>
</body>
</html>

Est-il nécessaire de faire cela lorsqu'il n'y a qu'une seule fonction à l'étage ? Changez le code comme suit

$(".a").hover(
function(){
$(this).find(".a1").css("display","block");
},
function(){
$(this).find(".a1").css("display","none");
}
);

$(".a").mouseover(function(){
$(this).find(".a1").css("display","block");
});
$(".a").mouseleave(function(){
$(this).find(".a1").css("display","none");
});

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!

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：Le survol de l'événement jQuery et le retard de l'événement mouseout déclenchent un problème lors d'un déplacement rapideArticle suivant：Le survol de l'événement jQuery et le retard de l'événement mouseout déclenchent un problème lors d'un déplacement rapide

Articles Liés

Voir plus