Javascript 如何根据设备创建“点击”或“悬停”菜单？

我正在用一个按钮创建一个按钮，我想要的是，当我在移动设备上时，我可以单击按钮并显示菜单。正如我们所知，我们不能在移动设备上悬停，但在选项卡和更高的设备上，菜单应该显示为悬停，而不是单击。 如果我对移动设备使用

onclick

，则菜单将保留在中等及以上设备上，如果我删除onclick以在中等及以上设备上正常工作，则在移动设备上，我们无法单击，因为打开菜单的唯一选项是悬停，这在移动设备中无法执行。如何解决这个问题。 唯一的目标是做出响应性设计

const btn=document.querySelector（'.btn'）；
const list=document.querySelector（'.list'）；
btn.addEventListener（'单击'，（）=>{
list.style.display='block'；
})

.btn{
保证金：0；
显示：块；
宽度：100%；
填充：1rem；
背景色：青色；
颜色：白色；
字号：2rem；
边界半径：8px；
}
.名单{
显示：无；
}
.btn:悬停+列表{
显示：块；
}
}
@介质（最小宽度：768px）{
.btn{
宽度：50%；
}
}

名称

项目1
项目2
项目3
项目4

在这里，您可以阅读有关JavaScript媒体查询的内容，甚至可以根据窗口大小进行不同的onClick:

尝试以下操作：

const btn=document.querySelector（'.btn'）；
const list=document.querySelector（'.list'）；
const header=document.querySelector（'header'））
let=false
btn.addEventListener（'单击'，（）=>{
点击=！点击；
list.classList.toggle（'active'）；
})
btn.addEventListener（'mouseover'，（）=>{
如果（！单击）{
list.classList.add（'active'）；
}
})
btn.addEventListener（'mouseout'，（）=>{
如果（！单击）{
设置超时（400）；
list.classList.remove（'active'）；
}
})
list.addEventListener（'mouseover'，（）=>{
如果（！单击）{
list.classList.add（'active'）；
}
})
list.addEventListener（'mouseout'，（）=>{
如果（！单击）{
list.classList.remove（'active'）；
}
})

.btn{
保证金：0；
显示：块；
宽度：100%；
填充：1rem；
背景色：青色；
颜色：白色；
字号：2rem；
边界半径：8px；
}
.名单{
保证金：0；
填充：16px0；
左侧填充：40px；
显示：无；
}
.list.active{
显示：块；
}
@介质（最小宽度：768px）{
.btn{
宽度：50%；
}
}

名字

项目1
项目2
项目3
项目4

一些文字可以增加窗口的高度，让您将鼠标从列表中移出：Lorem ipsum dolor sit amet、Concertetur Adipising Elite、sed do eiusmod Temporal Incidedut ut labore et dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔的丘比特不骄傲，不能因为工作的过失而受到伤害。

你必须添加“触摸”事件，这样它只能与触摸屏一起工作

btn.addEventListener（'touchstart'，（）=>{
list.style.display='block'；
})

我不知道我们还可以根据窗口大小添加事件监听器。这很有效，但我想知道我们是否可以在桌面上测试它。因为我们总是需要刷新工作js媒体查询