jQuery用unbind方法去掉hover事件及其他方法介绍

近日项目开发十分的繁忙,其中一个需求是实现响应式导航。(响应式的问题我们在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事件及其他方法介绍,布布扣,bubuko.com

时间: 2024-08-06 07:57:05

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

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

在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢?一.如何绑定hover事件先看以下代码,假设我们给a标签绑定一个click和hover事件:$(document).ready(function(){ $('a').bind({ hover: function(e) { //Hover event handler alert("hove

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

通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(function(){})是没有效果的. 解决方法:用on函数 一直以为on函数只有2个参数 正确格式: $("outerSelector").on('eventType','selector',function(){}): outerSelector 是一个一直存在的DOM, selector是你要

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

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").live("click",function(

219 jQuery事件处理: off() 解绑事件,trigger() 、triggerHandler() 自动触发事件

? 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑.jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ; 语法 演示代码 <body> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子<

jQuery绑定以及解除时间方法总结,以及事件触发的方法

 一   off()和on()          $("obj").on(event,[sesect],[data],fn);一般情况下参数只有两个,事件以及事件的处理函数          off() 方法移除用.on()绑定的事件处理程序,如$("p").off("click","");   二  die()和live()        $("obj").live(type,[date],fn),$(&

jQuery的三种bind/One/Live/On事件绑定使用方法

本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(eve

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样 主要的方法 $(".section  ul li").hover(function() //伪类的触发 $(this).find(".r

jquery hover事件只触发一次动画

最近工作时遇到个关于动画的问题,如下: [javascript] view plain copy $("div").hover( function() { $(this).animate({"margin-top":"100px"},1000); }, function() { $(this).animate({"margin-top":"200px"},1000); }); 看代码就是一个简单的鼠标滑过的

jquery使用on()方法绑定的事件被执行多次的问题

jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况. 本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题. 简单还原一下问题的场景 这里简单还原一下问题的场景,使用一个按钮给另一个按钮通过on()方法绑定事件. HTML的部分 <input id="bindEventBtn" type="button" value="给按钮绑定事件的按钮" /> <input id=&quo