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 进度条 实现代码
Jul 30 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
React实现评论的添加和删除
Oct 20 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
深入理解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
通俗易懂的php防注入代码
2010/04/07 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
python 实现简易的记事本
2020/11/30 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
郭明义电影观后感
2015/06/08 职场文书
运动会通讯稿200字
2015/07/20 职场文书
学校教代会开幕词
2016/03/04 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python