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

黄舟
黄舟original
2017-06-26 13:24:432247parcourir

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"); } }); 
});

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'); })


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"); } }); 
});

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'); })

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

$('a').off('mouseenter').unbind('mouseleave');

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