The correct way to cancel and bind hover events in jquery

In web design, we often use jquery to respond to mouse hover events, and mouseover and mouseout events have the same effect, but how do you use bind to bind the hover method? How do I unbind an event with unbind?
First, how to bind the hover event
Let's 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 you click on the a tag, something strange happens, where the bound hover event is completely unresponsive, and the bound click event responds normally.

But if you change the wording, for example:
$ ("a"). Hover (function () {alert (' mouseover ');}, function () {
Alert (' mouseout '); })
This piece of code can run normally, can't bind hover bind?

In fact, you should use both MouseEnter and MouseLeave events instead, (which is also the. Hover () event used in the function)
So you can simply refer to it 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 a jquery-defined event that is designed to make it easier for users to bind calls to MouseEnter and MouseLeave events, which is not a real event, so of course it cannot be called as an event argument in. bind ().
Second, how to cancel the hover event
As you all know, you can use the Unbind function to unbind an event, but only the event that is bound by bind, the hover event in jquery is quite special, and if the event is bound in this way, it cannot be canceled.
$ ("a"). Hover (function () {alert (' mouseover ');}, function () {
Alert (' mouseout '); })
The correct way to unbind the hover event:
$ (' a '). Unbind (' MouseEnter '). Unbind (' MouseLeave '); Iii. summary
In fact, these questions can be seen in the official jquery documentation, but very few people go to see, most of the online tutorials just explain how to use this method, to achieve the goal, and do not have a deep understanding of why this writing?

If you have any doubts, please leave a comment.


Original link: http://www.uedsc.com/jquery-bind-hover-event.html

The correct way to cancel and bind hover events in jquery