How to bind and cancel hover events in jQuery (code attached)

This article mainly talks about how to use bind to bind the hover method, and how to use unbind to cancel the bound event. It has certain reference value. If you need it, you can take a look.

In web design, we often use jquery to respond to mouse hover events, which have the same effect as mouseover and mouseout events, but how to use bind to bind the hover method? How to use unbind to unbind an event?

1. How to bind the hover event

First look at the following code. Suppose we bind a click and hover event to the a tag:

$(document).ready(function(){
  $('a').bind({
    hover: function(e) {
      // Hover event handler
      alert("hover");
    },
    click: function(e) {
     // Click event handler
      alert("click");
    }
  });
});

When the a tag is clicked, something strange happens. The bound hover event does not respond at all, but the bound click event responds normally.
But if you change the writing method, for example:

$("a").hover(function(){
  alert('mouseover');
}, function(){
  alert('mouseout');
})

This code can run normally. Can't bind bind hover?

In fact, no, the two events of mouseenter and mouseleave should be used instead (this is also the event used in the .hover() function), so it can be quoted directly like this:

$(document).ready(function(){
  $('a').bind({
    mouseenter: function(e) {
      // Hover event handler
      alert("mouseover");
    },
    mouseleave: function(e) {
      // Hover event handler
      alert("mouseout");
    },
    click: function(e) {
      // Click event handler
      alert("click");
    }
  });
});

Because .hover() is an event defined by jQuery itself, it is just for the convenience of users to bind and call mouseenter and mouseleave events. It is not a real event, so of course it cannot be called as an event parameter in .bind().

2. How to cancel the hover event

As we all know, you can use the unbind function to cancel bound events, but you can only cancel events bound through bind. The hover event in jquery is quite special. If the event is bound in this way, it cannot be canceled.

$("a").hover(function(){
  alert('mouseover');
}, function(){
  alert('mouseout');
})

The correct way to cancel the bound hover event:

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

3. Summary

In fact, you can refer to jquery for these issues Few people have read the official documentation. Most tutorials on the Internet only explain how to use this method and only achieve the goal. There is no in-depth understanding of why it is written this way? If you have any questions, please leave a comment.

The above is the detailed content of How to bind and cancel hover events in jQuery (code attached). For more information, please follow other related articles on the PHP Chinese website!