How jquery cancels the hover event

This article focuses on "how jquery cancels the hover event". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how jquery cancels the hover event.

Jquery cancels the hover event: 1, bind a click and hover events to the a tag; 2, use the "$('a'). Unbind ('mouseenter'). Unbind (' mouseleave');" method to unbind the hover event.

This article operating environment: windows7 system, jquery3.2.1 version, DELL G3 computer

How does jquery cancel the hover event?

The correct way to unbind and bind hover events in jquery

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 hover methods? How to use unbind to unbind events?

How to bind hover events

Let's take a look at the following code, and 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) {/ / Clickevent handler alert ("click");});})

When you click on the a tab, something strange happens, in which the bound hover event does not respond at all, but the bound click event responds normally.

But if you write it in another way, for example:

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

This code can run normally, can't bind bind hover?

No, you should use mouseenter and mouseleave instead (this is also the event used in the .hover () function)

So you can quote it 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) {/ / Clickevent handler alert ("click");});})

Because .hover () is an event defined by jQuery itself to make it easier for users to bind to call mouseenter and mouseleave events, it is not a real event, so it certainly cannot be called as an event parameter in .bind ().

How to cancel the hover event

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

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

The correct way to unbind the hover event:

$('a'). Unbind ('mouseenter'). Unbind (' mouseleave'); now that you have a better understanding of "how jquery cancels the hover event", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!