jQuery 阻止动作在它开始之前被执行答案

【问题标题】：jQuery prevent action to be executed before it startsjQuery 阻止动作在它开始之前被执行
【发布时间】：2010-04-26 20:33:25
【问题描述】：

我遇到了一个小问题。我有一个导航构建，它在鼠标悬停时打开，但也听按键，而不是像鼠标结束一样触发相同的动画，只是额外打开子菜单。现在，当按键处于活动状态并且我将使用将鼠标悬停在该导航上，它会在我单击链接之前触发关闭操作。我怎样才能防止这种关闭动作？

$(function () {

// keypress
$('html').live('keydown', function (e) {
   if ( e.keyCode == 67 ){

       $("#control").animate({width: '+=105', duration:400}, 
           function(){ 
               /*callback*/     
               $("#control").css({overflow:'visible'});
               $("#control-menu li a").fadeTo('fast', 1);
               $("#categories ul").css({marginLeft: '140px', display: 'block'}).fadeIn('slow');
               $('#control').mouseenter(function() { $(this).stop(); });
           }
       )
   }
}); 

// set easing method    
jQuery.easing.def = 'easeInOutExpo'; 

// make menu work   
$("#control-menu li a").css({opacity:'0.1'});
$("#control").hoverIntent(
 function(){
    $(this).stop().animate(
        {width: '+=105',
        duration:400}, function(){ 
            /*callback*/    
            $("#control").css({overflow:'visible'});
            $("#control-menu li a").fadeTo('fast', 1);
        })
 },
 function(){
    $("#control-menu li a").fadeTo('fast', 0.1);
    $(this).stop().animate(
        {width: '-=105', 
        duration:800}, function(){ 
            /*callback*/    
            $("#control").css({overflow:'hidden'});
        })  
 }); 

// END  
});

提前感谢您的帮助！！！！

谨此，丹尼尔

【问题讨论】：

标签： jquery animation navigation

【解决方案1】：

看起来它并没有触发你的关闭动作，而是立即停止你的动画打开它。

keydown 处理程序中的这一行：

$('#control').mouseenter(function() { $(this).stop(); });

正在向#control 添加一个事件处理程序，绑定在您当前的事件处理程序位于document.ready 之后，因此它会在之后执行。这意味着当您悬停时，它会启动动画，然后立即停止它，因为当按下 keydown 时，它会在 mouseenter 上添加一个处理程序来执行此操作。

如果您只是删除该行，它将停止这种行为...但是查看您的代码我不清楚为什么它首先存在。如果您可以描述它是为了解决而添加的，那么应该有更好的方法来做到这一点，而不会导致当前的问题。

【讨论】：

【解决方案2】：

也许我应该分解代码并解释我想要做什么。我知道肯定会有更好的方法，但我不得不说，我绝对是新手 :)

好的，让我们分开吧：

// 使菜单工作基本上处理悬停时的菜单出现功能。那里的一切都像魅力一样运作
//按键问题来了。当按下键盘上的“C”时，导航与我将鼠标悬停在该导航上并将点悬停在“类别”上时相同。它还会打开该点的子菜单。现在，这一切都留下了。当我现在用鼠标转到该菜单并想要单击一个菜单点时，我触发了 1. 点，因此菜单的行为就像它应该的那样，它会关闭。这是我插入该函数的方法：

$('#control').mouseenter(function() { $(this).stop(); });

在按键完成后直接作为一个函数，这样我就可以在那里输入鼠标，甚至不会触发关闭。

就像我在上面所说的那样，会有更好的方法来完成这一切。例如读出所有链接并根据 html 结构动态生成 keydown 等等...... 不幸的是我是一个菜鸟，所以我不会自己得到它

【讨论】：