Javascript 删除活动元素不在平板电脑模式下工作

所以很明显，tablet视图中元素的悬停状态存在问题

我制作了一个示例，其中有一个位置固定的标题，其中有一个元素可以悬停并显示下拉内容。我正在使用附加类来显示下拉列表内容。下拉内容将显示在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');
});

以下是示例：

这在使用鼠标交互的桌面模式下运行良好，但问题只在使用tablet view时出现（我使用Chrome的开发工具来复制）。 因此，在平板电脑模式下，如果您单击“悬停我”，将显示下拉内容。现在尝试滚动它，这样应该会隐藏下拉内容。但当你再次点击“悬停我”时，它不会显示。我认为这是因为“悬停我”元素仍然是焦点

所以我想知道是否有人能在这方面帮助我？提前谢谢。

谢谢你的帮助， 我决定添加click事件，这样无论悬停状态如何，下拉列表都将始终显示。代码如下：

$('.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');
    });

---

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

你试过了吗？触摸设备中没有悬停或鼠标悬停之类的东西。尝试将相同的事件与触摸事件绑定，或单击并单击外部。