VueJS 点击在移动设备上不起作用，未检测到点击侦听器

Question

我试图找出 VueJS 在点击侦听器上的问题出在哪里。 所以这里我有一个用户可以选择的可能语言列表：

• CN
• FR
• 它

此列表被包装到

<div>

中，通过使用点击侦听器显示或隐藏列表，问题是它仅适用于桌面而不适用于移动设备

这是我拍摄的一些视频，向您展示问题出在哪里

桌面（此处按预期工作）

移动版（这里不再工作）

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

<template>
  <div @click="toggleList = !toggleList" class="lang-area" title="Change language">
    <ul class="lang-data">
      <li>{{ currentLanguage | uppercase }}</li>
      <li :key="index"
          @click="selectLang(lang)"
          class="lang-select"
          v-for="(lang, index) in listLanguages"
          v-if="toggleList">
        {{ lang | uppercase }}
      </li>
    </ul>
    <img alt="list languages" class="lang-list"
         src="../../static/icons/language-icon.svg">
  </div>
</template>

<script>
export default {
  props: {
    language: String,
  },
  data() {
    return {
      currentLanguage: this.language,
      toggleList: false,
      languageList: ['en', 'fr', 'it'],
    };
  },
  computed: {
    listLanguages() {
      return this.languageList.filter(lang => lang !== this.currentLanguage);
    },
  },
  methods: {
    selectLang(lang) {
      this.currentLanguage = lang;
      this.$emit('languageChanged', this.currentLanguage);
    },
  },
};
</script>

<style scoped lang="sass">
  @import "LanguageList"
</style>

如您所见，我使用

toggleList

变量来切换语言列表 通过进行一些测试，如果我单击

<div>

，它不会捕获该事件 我什至尝试过其他库，例如 HammerJS 但没有任何效果

Answer 1

我也有类似的问题。

我将 @click 事件放置在锚元素上。它们在桌面上工作得很好，但在手机上或将开发工具更改为响应模式时却不起作用。

<a @click="console.log('clicked')"></a>

这个问题然后让我发现，除了单击事件之外，我还需要添加一个@touchend事件才能使其工作。

<a @click="console.log('clicked')" @touchend="console.log('clicked')"></a>

干杯