Implementation code for canceling and binding hover events in jquery _jquery

Source: Internet
Author: User

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

How to bind a 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 you click on the A tab, strange things happen, where the bound hover event is completely unresponsive, the bound click event can respond normally.

But if you put it another way, say:

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

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

Instead, you should use the MouseEnter and MouseLeave events instead, which is also the event used in the. Hover () 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 an event defined by jquery itself to facilitate user bindings to invoke MouseEnter and MouseLeave events, it is not a real event, so of course it cannot be invoked as an event parameter in. bind ().

Ii. How to cancel the hover event

As you know, you can use the Unbind function to unbind events, but only events bound by bind can be canceled, and the hover event in jquery is 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 a hover event:

$ (' a '). Unbind (' MouseEnter '). Unbind (' MouseLeave ');

Third, summary

In fact, these questions can go to the jquery official documentation, but very few people have seen, most of the tutorials on the web just explain how to use this method, to achieve the purpose, and do not have a deep understanding of why it is written?

If you have any doubts, please comment.

The above jquery cancellation and binding hover event implementation code is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.