jquery中取消和绑定hover事件的实现代码


Posted in Javascript onJune 02, 2016

在网页设计中,我们经常使用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官方的说明文档,只是很少有人去看过,网上的大多数教程只是讲解如何去使用这个方法,达到目的即止,并没有深入的了解为什么这么写?

如果你有什么疑惑,欢迎评论留言。

以上这篇jquery中取消和绑定hover事件的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
js获取和设置属性的方法
Feb 20 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
深入理解jQuery之事件移除
Jun 02 #Javascript
深入理解JQuery循环绑定事件
Jun 02 #Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 #Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 #Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 #Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 #Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 #Javascript
You might like
用户的详细注册和判断
2006/10/09 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
毕业生求职信的经典写法
2014/01/31 职场文书
婚礼司仪主持词
2014/03/14 职场文书
教师节演讲稿
2014/05/06 职场文书
环保专项行动方案
2014/05/12 职场文书
商场消防安全责任书
2014/07/29 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
会议通知范文
2015/04/15 职场文书
2015年法院工作总结范文
2015/04/28 职场文书