Maison > interface Web > js tutoriel > Explication détaillée de la bonne façon d'annuler et de lier les événements de survol jquery

Explication détaillée de la bonne façon d'annuler et de lier les événements de survol jquery

黄舟
Libérer: 2017-06-26 13:24:43
original
2237 Les gens l'ont consulté

Dans la conception Web, nous utilisons souvent jquery pour répondre à l'événement de survol de la souris, qui a le même effet que les événements de survol et de sortie de souris . Mais comment utiliser on pour lier la méthode de survol ? Comment utiliser off pour annuler l'événement lié ?
1. Comment lier l'événement de survol
Regardez d'abord le code suivant Supposons que nous lions un événement de clic et de survol à la balise a :

$(document).ready(function(){ $('a').on({ hover: function(e) { 
 //Hover event handler 
alert("hover"); },
 click: function(e) { // Click event handler
alert("click"); } }); 
});
Copier après la connexion

Lorsque l'on clique sur la balise a, quelque chose d'étrange se produit. L'événement de survol lié ne répond pas du tout, mais l'événement de clic lié répond normalement.

Mais si vous changez de méthode d'écriture, par exemple :

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })
Copier après la connexion
Copier après la connexion


devrait être utilisé mouseenter et mouseleave ces deux événements à la place, (c'est aussi l'événement utilisé dans .hover() fonction )
afin que vous puissiez directement référence  :
aimer ceci

$(document).ready(function(){ $('a').on({ mouseenter: function(e) {
//Hover event handler 
alert("mouseover"); }, mouseleave: function(e) {
 //Hover event handler 
alert("mouseout"); }, click: function(e) { 
// Clickevent handler 
alert("click"); } }); 
});
Copier après la connexion

Parce que .hover() est un événement défini par jQuery lui-même, c'est juste pour la commodité des utilisateurs de lier et d'appeler les événements mouseenter et mouseleave. événement réel, donc bien sûr, il ne peut pas être appelé comme paramètre d'événement dans .on().
2. Comment annuler l'événement de survol
Comme nous le savons tous, vous pouvez utiliser la fonction off pour annuler l'événement lié, mais vous ne pouvez annuler l'événement lié que via bind L'événement de survol dans jquery est assez spécial. . Si vous réussissez, les événements liés de cette manière ne peuvent pas être annulés.

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })
Copier après la connexion
Copier après la connexion

La bonne façon d'annuler un événement de survol lié :

$('a').off('mouseenter').unbind('mouseleave');
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal