jquery: Implementation code for cancellation and binding of hover event

The editor below will bring you an implementation code for canceling and binding the hover event in jquery. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and 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 them? What about the hover method? How to use unbind to unbind an event?

1. How to bind the hover event

First look at the following code, assuming 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 .hover() function), so you can do it directly like this Quote:

$(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 used as .bind () to call the event parameters.

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

Actually, you can refer to the jquery official documentation for these questions, but few people have read it. 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 jquery: Implementation code for cancellation and binding of hover event. For more information, please follow other related articles on the PHP Chinese website!