vue2 list 点击空白区域不执行函数 点击文字才执行函数

在Vue.js 2.x中，如果你想要实现在列表(List)区域点击空白区域时不执行某个函数，而在点击列表项的文字时执行该函数，你可以这样做：

首先，在HTML模板中设置列表元素，并给每个列表项添加`v-on:click`事件监听，将点击事件绑定到你的处理函数上，例如`handleItemClick(item)`：

<template>
  <div @click="handleOutsideClick">
    <!-- 列表 -->
    <ul v-for="(item, index) in items" :key="index">
      <li @click="handleItemClick(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    handleItemClick(item) {
      // 处理点击列表项的逻辑
    },
    
    handleOutsideClick(e) {
      if (!e.target.matches('.list-item') && !e.target.matches('ul')) {
        // 如果点击的目标不是列表项也不是ul本身，则不执行回调
        e.stopPropagation();
      }
    },
  },
};
</script>

在上面的例子中，`handleOutsideClick`方法会在用户点击列表外部时触发，它会检查点击的目标是否是列表项（`.list-item`选择器）或整个列表容器。如果不是，就阻止事件冒泡，防止`handleItemClick`被执行。