Explication détaillée de l'application de la fonction .mouseleave() dans jQuery

La fonction

mouseleave() est utilisée pour lier une fonction de gestionnaire à l'événement mouseleave de chaque élément correspondant. Cette fonction peut également être utilisée pour déclencher l'événement mouseleave. De plus, vous pouvez également transmettre des données supplémentaires à la fonction gestionnaire d'événements.

L'événement mouseleave est déclenché lorsque la souris quitte un élément. Il est similaire à l'événement mouseout, mais l'événement mouseleave ne se déclenche que lorsque la souris quitte l'élément actuel, tandis que l'événement mouseout se déclenche lorsque la souris quitte l'élément actuel et l'un de ses éléments descendants (en d'autres termes, l'événement mouseout prend en charge le bouillonnement). ).

De plus, vous pouvez lier plusieurs gestionnaires d'événements en appelant cette fonction plusieurs fois pour le même élément. Lorsque l'événement mouseleave est déclenché, jQuery exécutera les fonctions de traitement des événements liés dans l'ordre de liaison.

Pour supprimer un événement lié via mouseleave(), utilisez la fonction unbind().

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

jQueryObject.mouseleave( [[ data ,]  handler ] )

Si au moins un paramètre est spécifié, cela signifie lier la fonction de gestionnaire de l'événement mouseleave ; si aucun paramètre n'est spécifié, cela signifie déclencher l'événement mouseleave ;

Paramètres

jQuery 1.4.3 Nouveau support : mouseleave() prend en charge les paramètres de données.

Ceci dans le gestionnaire de paramètres pointe vers l'élément DOM actuel. mouseleave() transmettra également un paramètre au gestionnaire : l'objet Event représentant l'événement en cours.

Valeur de retour

mouseleave()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemple et description

Veuillez vous référer à l'exemple de code HTML suivant :

<div>
    <p id="p1">CodePlayer</p>
    <p id="p2">专注于编程技术开发分享</p>
    <p id="p3">http://www.365mini.com</p>
</div>
<span id="msg"></span>

Maintenant, nous lions une fonction de gestionnaire à l'événement mouseleave du

élément (vous pouvez lier plusieurs éléments définis, exécutés dans l'ordre selon l'ordre de liaison lorsqu'ils sont déclenchés) :

mouseleave只会在鼠标离开

元素时才会触发，而mouseout会在鼠标离开

元素或任何

元素时触发。例如：鼠标从p1进入p2(即离开p1)会触发

元素的mouseout事件，但不会触发

元素的mouseleave的事件。

var count = 0;

//记录触发div元素的mouseleave事件的次数
$("div").mouseleave(function(){
    $("#msg").html( "触发mouseleave的次数：" + ( ++count ) );
});

//鼠标离开div元素就改变背景颜色
$("div").mouseleave(function(){
    $(this).css( "color", "purple" );
});


// 触发mouseleave事件
// $("div").mouseleave( );

我们还可以为事件处理函数传递一些附加的数据。此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)：

var cssStyle = { background: "#eee", color: "blue" };

//鼠标离开div元素就设置指定的css样式
$("div").mouseleave( cssStyle, function(event){
    var style = event.data;
    $(this).css( style );
} );

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!