Javascript 事件处理程序相互冲突

我使用下面的代码向下滑动一个向上菜单选项。一切都很顺利，直到我再次点击按钮，将菜单向上滑动，而它又向上和向下滑动

$（函数（）{
$（'.login btn，.lang btn'）。在（'click'，函数（事件）{
var btn=$（本）；
$（文件）({
mousedown：函数（e）{
btn.children（'ul'）.slideUp（）；
},
滚动：函数（）{
btn.children（'ul'）.slideUp（）；
}
});
btn.儿童（'ul'）。滑动切换（）；
event.stopPropagation（）；
});
});
ul{
列表样式：无；
}
.btn{
利润率：0.20px 0.0；
背景：ddd；
填充物：5px10px；
边界半径：4px；
光标：指针；
浮动：左；
位置：相对位置；
}
.btn ul{
位置：绝对位置；
最高：100%；
宽度：290px；
填充：20px 30px；
显示：无；
高度：370px；
溢出：隐藏；
背景:#666；
颜色：#fff
}



登录

这里有些东西



英语

英式
法语的


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

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

(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
绑定时不需要重复事件处理程序，只需在绑定时指定几个事件类型即可
您的问题从这里开始：

  $(document).on({
    mousedown: function(e) {
        btn.children('ul').slideUp();
    },
    scroll: function() {
        btn.children('ul').slideUp();
    }
});
btn.children('ul').slideToggle();

首先执行
slideUp
，然后执行
slideToggle
（执行
slideUp
或
slideDown
的操作取决于元素的情况）

因此，要解决您的问题，请删除

部件上的

，或
滑块切换
！在代码段上检查此更新：


$（文档）。在({
mousedown：函数（e）{
btn.children（'ul'）.slideUp（）；
},
滚动：函数（）{
btn.children（'ul'）.slideUp（）；
}
});

ul{
列表样式：无；
}
.btn{
利润率：0.20px 0.0；
背景：ddd；
填充物：5px10px；
边界半径：4px；
光标：指针；
浮动：左；
位置：相对位置；
}
.btn ul{
位置：绝对位置；
最高：100%；
宽度：290px；
填充：20px 30px；
显示：无；
高度：370px；
溢出：隐藏；
背景:#666；
颜色：#fff
}



登录

这里有些东西



英语

英式
法语的


最好的解决方案是在

和鼠标向下事件中添加结尾

，以停止传播：

$('.login-btn, .lang-btn').on('click', function(){
    var btn = $(this);
    btn.children('ul').slideToggle();
    btn.siblings().children('ul').slideUp();

    $(document).on("mousedown scroll", function(e) {
        btn.children('ul').slideUp();
    });
}).on('mousedown', function(e){
    e.stopPropagation();
});

还要感谢DenysSéguret的大力帮助。
没有帮助！问题仍然是谢谢你的编辑，但它会上下滑动@看来丹尼斯的答案很有效！但是，也许你可以添加一个片段，人们可以通过我用不同的解决方案编辑来帮助你。但请注意，这也取决于您真正想要什么（例如，当已经有一个打开的div，您单击一个关闭的div时），我在问题中添加了一个片段。您可以检查上一个jquery代码。真的没用！使用
slideToggle
我想上下滑动菜单。必须在
mousedown
和window
scroll
上向上滑动菜单。无法删除它。
slideToggle
根据情况更改滑动！所以如果它向上，它就会向下，如果它向下，它就会向上！因此，在你的
中
使用
slideToggle
并删除
slideUp
，然后使用它！你试过了吗？似乎如果
菜单
关闭，滚动将打开它。滚动将持续启动，直到您停止滚动，滚动将持续切换。请检查代码段！我相信这就是你想要的！你能在应用程序执行后检查一下点击功能生成了多少次吗，因为两个相同的功能也可能是问题所在，就像我的情况一样，我只是检查了一下，删除了两次出现的相同功能，并且只从另一个页面使用了一个。