在活动区域​​内的初始焦点事件之后停止事件冒泡

Question

我有一个下拉菜单，我希望用户能够通过标签浏览。我有一个相当不错的地方的功能，一旦用户选中菜单向下滑动的元素，当用户选中时，它会向上滑动。唯一的问题是焦点：每次用户选中菜单中的新链接时都会被点击。所以经验相当......有弹性。

在用户跳出实时区域之前，如何防止事件冒泡？谢谢！

$('#block-pagestyle-form')
  .live({
    focus:function (){
            $('#pagestyle_current_list').slideDown(250)
    },
    blur: function (){
            $('#pagestyle_current_list').slideUp(250)
    }
  });

编辑： 对于那个很抱歉！我正在处理的HTML是：

<div id="block-pagestyle-form">
  <h1><a href="">Menu Title</a></h1>
  <ul id="pagestyle_current_list">
    <li><a href="">Menu Item</a></li>
    <li><a href="">Menu Item</a></li>
    <li><a href="">Menu Item</a></li>
  </ul>
</div>

用户需要能够标记到h1标记，触发.slideDown，当它们跳出div时，菜单需要向上滑动。现在，代码在每次菜单中的锚点被选中时运行.slideDown（）。

Answer 1

我猜测“＃block-pagestyle-form”包含在每个标签中，因此您指定的焦点/模糊事件监听器正在添加到每个标签中，当您真正想要相同的事件时对于所有选项卡。

尝试将焦点/模糊事件附加到包含所有选项卡的元素。我没有那么多使用jquery，所以我只是在猜这里......

$('#parent-element-which-contains-all-tabs')
  .live({
    focus:function (){
            $('#pagestyle_current_list').slideDown(250)
    },
    blur: function (){
            $('#pagestyle_current_list').slideUp(250)
    }
  });

Answer 2

我不确定我是否正确理解了您的问题，但您可以使用stop方法停止以前的动画：

$('#block-pagestyle-form')
  .live({
    focus:function (){
            $('#pagestyle_current_list').stop(true, true).slideDown(250)
    },
    blur: function (){
            $('#pagestyle_current_list').slideUp(250)
    }
  });