Question

我正在使用以下代码隐藏页面上的弹出菜单：

$(document).mouseup(function (e) {
    var container = $(".dropDownMenuOptions");
    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

效果很好，但是在少数情况下弹出窗口可能非常大，所以我将DIV设置为x-像素量的最大高度，然后显示滚动条，如人们所期望的那样。

然而问题是，如果用户使用他们的鼠标滚轮按钮，他们可以浏览选项列表但是如果他们使用滚动条，则会注册mouseup事件，从而导致弹出窗口消失。

无论如何，我可以告诉mouseup函数忽略滚动条点击或任何其他可能的方式来实现我所追求的目标吗？

我正在试图解决导致问题的原因。如果mouseup不在容器中，我会运行代码，但滚动条肯定是容器的一部分，因此不应该是一个问题。

Answer 1

它不能解决您的问题吗？！

DEMO jsFiddle

$(document).mouseup(function (e) {
    var container = $(".dropDownMenuOptions");
    if (!$(e.target).closest('.dropDownMenuOptions').length) {
        container.hide();
    }
});

Answer 2

我不确定这是否有用，但你可以尝试一下

// Step 1 : Use below event to identify scrollstop
$(document).bind("scrollstop", function(e) {
   e.stopImmediatePropagation(); // Step2 : Stop the propagation for the mouse up event
});

你可以创建一个jsfiddle并尝试一下。

防止DIV滚动条上的mouseUp事件

2 个答案: