javascript - 事件处理程序相互冲突

Question

我正在使用以下代码向下滑动向上菜单选项。一切顺利，直到我再次单击按钮向上滑动菜单，而它再次上下滑动。

$(function() {
    $('.login-btn, .lang-btn').on('click', function(event){
        var btn = $(this);
        $(document).on({
            mousedown: function(e) {
                btn.children('ul').slideUp();
            },
            scroll: function() {
                btn.children('ul').slideUp();
            }
        });
        btn.children('ul').slideToggle();
        event.stopPropagation();

    });
});

ul {
  list-style:none;
}
.btn {
  margin:0 20px 0 0;
  background:#ddd;
  padding:5px 10px;
  border-radius:4px;
  cursor:pointer;
  float:left;
  position:relative;
}
.btn ul{
    position:absolute;
    top:100%;
    width: 290px;
    padding: 20px 30px;
    display: none;
    height: 370px;
    overflow: hidden;
    background:#666;
    color:#fff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="btn login-btn">
    Sign In
    <ul>
      <li>Some stuff here</li>
    </ul>
  </li>
  <li class="btn lang-btn">
    English
    <ul>
      <li>English</li>
      <li>French</li>
    </ul>
  </li>
</ul>

我的代码有问题吗？!

Answer 1

您在每次点击时注册事件处理程序并且从不取消注册它们，因此在您第二次打开时，您有两个事件处理程序并且它们都被调用。

您可以注销它们，但有一种比注册和注销更简单的方法:存储打开的按钮:

(function(){
    var btn = null;
    $('.login-btn, .lang-btn').click(function(){
        if (btn) return;
        btn = $(this);
        btn.children('ul').slideDown();
        return false;
    });
    $(document).on("click scroll", function(){
      if (!btn) return;
      btn.children('ul').slideUp();
      btn = null;
      return false;
    });
})(); 

旁注:您可能会注意到一些简化:

• 无需调用stopPropagation和preventDefault，只需返回false
• 绑定(bind)时无需重复事件处理器，绑定(bind)时指定几种事件类型即可