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
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!