javascript - 删除在平板电脑模式下不起作用的事件元素

Question

很明显，平板电脑 View 中元素的悬停状态存在问题。

我制作了一个示例，其中我有一个位置固定的标题，其中有一个可以悬停并显示下拉内容的元素。我正在使用其他类来显示下拉内容。下拉内容将在 mouseenter 上显示并在 mouseleave 上或窗口滚动时隐藏，如下所示:

$('.custom-dropdown').on('mouseenter', function(){
    $(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function(){
    $(this).children('.dropdown-content').removeClass('active');
})

$(window).scroll(function () {
    document.activeElement.blur();
    $('.custom-dropdown').trigger('mouseleave');
});

示例如下:https://jsfiddle.net/tja9scg4/

这在使用鼠标交互的桌面模式下工作正常，但只有在使用平板电脑 View 时才会出现问题(我使用 Chrome 的开发人员工具来复制它)。因此，在平板电脑模式下，如果您单击“悬停我”，将显示下拉内容。现在尝试滚动它，应该会隐藏下拉内容。但是，当您再次单击“悬停我”时，它不会显示。我认为发生这种情况是因为“悬停我”元素仍处于焦点状态。

所以我想知道是否有人可以帮助我解决这个问题？提前致谢。

Answer 1

感谢您的帮助，我决定添加点击事件，这样无论悬停状态如何，下拉菜单都会始终显示。这是代码:

$('.custom-dropdown').on('mouseenter', function () {
        $(this).children('.dropdown-content').addClass('active');
    }).on('mouseleave', function () {
        $(this).children('.dropdown-content').removeClass('active');
    }).on('click', function () {
        $(this).children('.dropdown-content').addClass('active');
    });

如果有人有最佳实践，请随时分享。现在，我认为这会很好..