jQuery 中取消和绑定 Hover 事件的正确方式

发布于 2018-07-27 19:31:31 字数 1759 浏览 2525 评论 0

在网页设计中,我们经常使用 jQuery 去响应鼠标的 Hover 事件,和 MouseOver  和 MouseOut 事件有相同的效果,但是这其中其中如何使用 Bind 去绑定 Hover 方法呢?如何用 unBind 取消绑定的事件呢?

如何绑定 Hover 事件

先看以下代码,假设我们给 A 标签绑定一个 Click 和 Hover 事件:

$(document).ready(function(){
    $('a').bind({
        hover: function(e) {
            // Hover event handler
            alert("hover");
        },
        click: function(e) {
            // Click event handler
            alert("click");
        }
    });
});

当点击 A 标签的时候,奇怪的事情发生了,其中绑定的 Hover 事件完全没有反应,绑定的 Click 事件却可以正常响应。

但是如果换一种写法比如:

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

这段代码就可以正常的运行,难道 Bind 不能绑定 Hover?

其实不是,应该使用 MouseEnter 和 MouseLeave 这两个事件来代替,这也是 hover() 函数中使用的事件,所以完全可以直接像这样来引用:

$(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");
        }
    });
});

因为 hover() 是 jQuery 自己定义的事件,是为了方便用户绑定调用 MouseEnter 和 MouseLeave 事件而已,它并非一个真正的事件,所以当然不能当做 bind() 中的事件参数来调用。

如何取消 Hover 事件

大家都知道,可以使用 unBind 函数去取消绑定的事件,但是只能取消通过 Bind 绑定的事件,jQuery 中的 Hover 事件是比较特殊的,如果通过这种方式去绑定的事件,则无法取消。

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

取消绑定的 Hover 事件的正确方式:

$('a').unbind('mouseenter').unbind('mouseleave');

最后总结

其实这些问题可以去参看 jQuery 官方的说明文档,只是很少有人去看过,网上的大多数教程只是讲解如何去使用这个方法,达到目的即止,并没有深入的了解为什么这么写,如果你有什么疑惑,欢迎评论留言。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

4401 文章
128 评论
84972 人气
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。