Home > Web Front-end > JS Tutorial > How to bind and cancel hover events in jQuery (code attached)

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

yulia
Release: 2018-09-15 14:12:33
Original
1761 people have browsed it

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

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

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

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

The correct way to cancel the bound hover event:

$('a').unbind('mouseenter').unbind('mouseleave');
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template