阻止单击滚动条触发.blur

Prevent clicking scrollbar from triggering .blur

本文关键字：blur 滚动条 单击      更新时间：2023-09-26

我为我正在开发的一个web应用程序编写了一个自定义下拉列表，我想用它完成一组特定的功能。首先，如果你把鼠标从菜单上移开，我希望下拉列表保持打开状态。我希望它在您重新单击下拉标题、单击下拉列表中的某个元素或单击页面上的其他任何位置时关闭。如果元素太多，我还需要在下拉项列表中启用滚动条。我们使用的是标准分辨率，所以我使用最大高度属性来实现这一点。我保持菜单打开的方法是在.bulr（）事件上使菜单按钮聚焦并关闭菜单项。问题是当用户单击滚动条并关闭菜单时，.blur（）会触发。我在这里创建了一个菜单示例：http://codepen.io/jiggawagga/pen/wmkEG我发现一件奇怪的事情是，在我正在开发的应用程序中的谷歌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');
    }
}

与其执行.blur()事件，我建议在.group-dropdown-item上执行.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

相关文章：