Javascript VueJS单击不'；无法在手机上工作，未检测到“单击侦听器”

我试图找出VueJS on click listener的问题所在。 因此，我这里有一个可能的语言列表，用户可以从中选择：

• 嗯
• FR
• 它

此列表被包装成一个

，通过使用单击侦听器显示或隐藏列表，问题是它只在桌面上工作，而在移动设备上不工作

这里是我拍摄的一些视频，告诉你问题出在哪里

这是我现在用于组件的代码

{{currentLanguage |大写}}

{{lang |大写}}


导出默认值{
道具：{
语言：字符串，
},
数据（）{
返回{
当前语言：this.language，
切换列表：false，
语言列表：['en'，'fr'，'it']，
};
},
计算：{
列表语言（）{
返回this.languageList.filter（lang=>lang！==this.currentLanguage）；
},
},
方法：{
选择语言（lang）{
this.currentLanguage=lang；
此.emit（'languageChanged'，此.currentLanguage）；
},
},
};
@导入“语言列表”

我建议检查的第一件事是单击处理程序是否未调用，或者是否调用了两次。您可以通过创建一个方法并使用控制台日志来检查这一点。您可以尝试使用

@click.native=”“

将其设置为本机单击处理程序。也可能是您的样式对容器div做了一些奇怪的事情（例如，所有元素都是浮动/绝对定位的，在某些情况下使容器的高度为0像素）。我尝试了

@click.native

，但根本没有触发单击，我不认为这与css有关，因为我在Inspector中检查了它，也不确定您在哪个环境/浏览器中运行代码，但即使在我的Moto X手机（在android上使用chrome）上，它似乎也能在JSFIDLE上运行。你能分享你的hammerjs解决方案吗？你是如何解决这个问题的？我也有同样的问题，我也有同样的问题。在看到这里的评论后，我返回检查我的html/css。结果表明，某些响应性样式导致另一个元素覆盖在我试图单击的元素上。该覆盖元素有自己的单击处理程序，并被触发。我应该意识到这一点，因为当我通过chrome检查元素时，它总是将我带到页面上的另一个元素！