javascript - 防止点击滚动条触发.blur

Question

我为我正在开发的网络应用程序编写了一个自定义下拉列表，并且我想用它来完成一组特定的功能。首先，如果您将鼠标移离菜单，我希望下拉菜单保持打开状态。我希望当您重新单击下拉列表标题、单击下拉列表中的元素之一或单击页面上的其他任何位置时关闭它。如果元素太多，我还需要在下拉项列表中启用滚动条。我们使用标准分辨率，因此我使用 max-height 属性来完成此任务。我保持菜单打开的方法是在 .bulr() 事件发生时给予菜单按钮焦点并关闭菜单项。问题是当用户单击滚动条并且菜单关闭时 .blur() 会触发。我在这里创建了一个菜单示例:http://codepen.io/jiggawagga/pen/wmkEG我发现一件奇怪的事情是在我正在开发的应用程序中的 Google Chrome 中，您可以单击滚动条并且菜单保持打开状态，但在 Internet Explorer 中则不然。另一个奇怪的事情是 Codepen.io 中的示例与应用程序具有完全相同的代码，但它不会在 Chrome 中保持打开状态。 (我并不关心其他浏览器，这是一个内部应用程序，由于企业标准，我们仅针对 IE 8(bleh)和 Chrome)下面是我用来处理菜单的 Javascript 和 HTML。 (同样，完整的代码和工作示例位于上面的 codepen.io 链接)

<div id="container">
<div id="group-dropdown">
  <a href="#" id="group-dropdown-title">
    GROUP NAME <span id="group-dropdown-indicator-arrow" class="arrow arrow-down"></span>
  </a>
  <div id="group-dropdown-item-container">
    <div class="group-dropdown-item" data-bind="1234567">
        <a href="#">
          <span class="group-dropdwon-item-name">GROUP 2 NAME</span>
          <br />
          <span style="color: #daa520;">INPROGRESS</span>
          <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
          <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
        </a>
    </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: green;">ACTIVE</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
    </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: green;">ACTIVE</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
    </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: green;">ACTIVE</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
    </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: green;">ACTIVE</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
      </div>
    <div class="group-dropdown-item" data-bind="1651651">
        <span class="group-dropdwon-item-name">GROUP 3 NAME</span>
        <br />
        <span style="color: red;">TERMINATED</span>
        <span style="color: #0065a4;"><b style="color: black;">Group Number:</b> 1651651</span>
        <span style="color: #0065a4;"><b style="color: black;">BCBS Number:</b> 61565</span>
      </div>
    </div>
</div>
</div>

var _menuOpen = false;
$('#group-dropdown-title').click(function () {
            if (_menuOpen) {
                $('#group-dropdown-title').blur();
                $('#group-dropdown-title').removeClass('hovered');
                $('#group-dropdown-item-container').hide();
                flipArrow('down');
                _menuOpen = false;
            }
            else {
                $('#group-dropdown-title').focus();
                $('#group-dropdown-title').addClass('hovered');
                $('#group-dropdown-item-container').show();
                flipArrow('up');
                _menuOpen = true;
            }
        });

        $('#group-dropdown-title').blur(function (e) {
                $('#group-dropdown-title').removeClass('hovered');
                $('#group-dropdown-item-container').hide();
                flipArrow('down');
                _menuOpen = false;
        });

function flipArrow(direction) {
    if (direction.toLowerCase() === 'up') {
        $('#group-dropdown-indicator-arrow').removeClass('arrow-down');
        $('#group-dropdown-indicator-arrow').addClass('arrow-up');
    } else if (direction.toLowerCase() === 'down') {
        $('#group-dropdown-indicator-arrow').removeClass('arrow-up');
        $('#group-dropdown-indicator-arrow').addClass('arrow-down');
    }
}

Answer 1

我建议不要在 .group-dropdown-item 上执行 .blur() 事件，而是执行 .click() 事件> 像这样:

$('.group-dropdown-item').click(function (e) {
   $('#group-dropdown-title').removeClass('hovered');
   $('#group-dropdown-item-container').hide();
   flipArrow('down');
   _menuOpen = false;
});

更新:

$('#group-dropdown-title').click(function () {
    if (_menuOpen) {
        $('#group-dropdown-item-container').blur();
        flipArrow('down');
        _menuOpen = false;
    } else {
        $('#container').addClass('clickClose');
        $('#group-dropdown-title').addClass('hovered');
        $('#group-dropdown-item-container').show();
        $('#group-dropdown-item-container').focus();
        flipArrow('up');
        _menuOpen = true;
    }
});

$('.group-dropdown-item').click(function (e) {
    $('#group-dropdown-item-container').blur();
    //add menu item action here
    flipArrow('down');
    _menuOpen = false;
});

$('#group-dropdown-item-container').blur(function (e) {
    if (_menuOpen) {
        $('#container').removeClass('clickClose');
        $('#group-dropdown-title').removeClass('hovered');
        $('#group-dropdown-item-container').hide();
        flipArrow('down');
        _menuOpen = false;
    }
});

$('html, body, #container, #group-dropdown').click(function (e) {
    if (_menuOpen) {
        $('#group-dropdown-item-container').blur();
    }
}).children().click(function (e) {
    return false;
});

CodePen