近日项目开发十分的繁忙,其中一个需求是实现响应式导航。(响应式的问题我们在css相关的博客中再交流)

大家都知道导航是需要下来菜单效果的,必然就会用到 jQuery的 hover() 方法。若是导航放在ipad中,自然hover()就没有什么意义了。那该如何取消hover()并添加touch事件呢?

今天遇到jquery需要去掉hover的问题,原以为直接unbind(“hover”)就可以搞定,可是搞了半天都报错。

原因其实很简单,hover并不是事件。打开参考手册,hover其实由 mouseenter和mouseleave构成的。这样问题就很明了!

/* 这种方法是错误的 */
$(#hover_div).unbind("hover"); /* 这种方法也是错误的 */
$(#hover_div).unbind("mouseover").unbind("mouseout"); /* 这种方法是新增的,在老的版本里是无法使用的 */
$(#hover_div).unbind("mouseenter mouseleave"); /* 这种方法正确的,新老版本皆可用 */
$(#hover_div).unbind("mouseenter").unbind("mouseleave");

上面的代码建议使用第四种,相对安全些。(自己也没测试具体哪些版本支持第三种方法)若是觉得不爽,自己刚download了新版的jQuery,就用第三种吧!

不管怎样,问题已解决,接着写代码吧!勤劳的码农。

jQuery用unbind方法去掉hover事件及其他方法介绍的更多相关文章

  1. jquery中取消和绑定hover事件的正确方式

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...

  2. jQuery的live()方法对hover事件的处理示例

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个 ...

  3. jQuery 的 live() 方法对 hover 事件的处理

    因为hover不是标准的事件,因此无法直接使用live进行处理,故使用以下方法代替,效果一样 <script type="text/javascript"> $(&qu ...

  4. jquery hover事件冒泡解决方法

    $(this).hover(function(event){    $(this).addClass("cur");    event.stopPropagation();     ...

  5. 处理jQuery append加入的元素 绑定事件无效的方法

    通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(functi ...

  6. 解决使用jQuery采用append添加的元素事件无效的方法

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  7. 利用javascript动态加载头部出现点击事件与hover事件无效解决方法

    这里是利用es6的promise函数来异步加载,当HTML动态加载过去的HTML片段加载完毕再执行绑定事件的js代码: 具体过程如下 这里是用了jQuery框架的例子 $(function(){ // ...

  8. 使用jQuery的hover事件在IE中不停闪动的解决方法

    在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百 ...

  9. JQuery触发hover事件无效时使用js原生的触发事件方法

    需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...

随机推荐

  1. localtunnel内网服务器暴露至公网

    摘自@scarlex   1.安装 npm install -g localtunnel 2.运行 lt --port 8080  (your url is: http://xxxx.localtun ...

  2. JQuery给一个元素绑定两次点击事件(第二次点击事件)

    由于项目的要求,需要给复选框设置样式,初始样式:,第一次点击的时候显示,第二次点击时候需要改变该样式:. 设计思路: 当点击次数为奇数时显示带有颜色的图片 当点击次数为偶数时显示没有颜色的图片 下边是 ...

  3. WebApiClient.AOT.dll 调用api地址 -> 调用方法

    优点:简化api调用过程,WebApiClient.AOT.dll中的IHttpApi接口 缺点:只适用于内部服务之间的调用(没有验证过程) 1.继承IHttpAPi接口 public interfa ...

  4. Knowledge Point 20180305 十进制转换成二进制浮点数

    如何将十进制的浮点数 转换二进制的浮点数,分为两部分: 1. 先将整数部分转换为二进制, 2. 将小数部分转换为二进制, 然后将整数部分与小数部分相加. 以 20.5 转换为例,20转换后变为1010 ...

  5. js的垃圾回收机制

    Js具有自动垃圾回收机制.垃圾收集器会按照固定的时间间隔周期性的执行. JS中最常见的垃圾回收方式是标记清除. 工作原理:是当变量进入环境时,将这个变量标记为“进入环境”.当变量离开环境时,则将其标记 ...

  6. springboot-redis缓存

    Redis缓存使用 1.  引入依赖(可能已经引入了):spring-boot-starter-cache 2.  在application.yml配置文件中配置spring:redis:host/p ...

  7. mysql 8.0.12 日常出错

    最近不知道怎么回事,数据库老是会输出一个: [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and co ...

  8. 在线预览word,excel文档

    Google Doc 示例:https://jsfiddle.net/7xr419yb/ Microsoft Office 示例:https://jsfiddle.net/gcuzq343/

  9. python学习——函数进阶

    首先来看下面这个函数. def func(x,y): bigger = x if x > y else y return bigger ret = func(10,20) print(ret) ...

  10. 请求报文的方法及get与post的区别

    请求报文的方法及get与post的区别 请求的起始以方法作为开始,方法用来告诉服务器要如何做. 在开发中通常有两种请求方式. get方式: 是以实体的方式得到由请求 URI 所指定资源的信息,如果请求 ...